关于pc端媒体查询处理自适应不同分辨率的方法

现在pc端有很多分辨率，在宽度自适应已解决的情况下，客户要求不出现竖向滚动条，如何配置高度自适应。

如：1920*1080、1680*1050、1600*900、1440*900、1366*768.

媒体查询针对的是浏览器内容窗体（即body）的尺寸，

比如max-height：900px,意思是最大高度是900，所以是所有小于900像素内的分辨率。

书写要从大到小的顺序排列

/*1920*1080分辨率*/

@media screen and (max-height:1050px){

.banner{height: 600px;}

#bannerbg{height: 600px;}

}

/*1680*1050分辨率*/

@media screen and (max-height: 920px){

.banner{height: 568px;}

#bannerbg{height: 568px;}

}

/*在1600*900分辨率下谷歌浏览器的高度*/

@media screen and (max-height: 770px){

.banner{height: 480px;}

#bannerbg{height: 480px;}

}

/*在1600*900分辨率下360浏览器的高度*/

@media screen and (max-height: 745px){

.banner{height: 480px;}

#bannerbg{height: 480px;}

}

/*这个是适配1366*768分辨率*，只适配宽度为1366的宽度/

@media screen and (max-width: 1366px) {

.banner{height: 345px;}

#bannerbg{height: 345px;}

/*这个是适配768高度分辨率*/

@media screen and (max-width: 635px) {

.banner{height: 345px;}

#bannerbg{height: 345px;}

不同浏览器的body高度不一样，所以相同屏幕分辨率下要针对不同浏览器写高度。

最好是用max-width来做响应式页面，但是一些涉及到只跟高度有关的pc端的设置，可以根据高度来写适配

如果是区分pc端和移动端，就以max-width来写适配

今天的文章关于pc端媒体查询处理自适应不同分辨率的方法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。