在做移动端的h5时，要使用媒体查询属性根据手机屏幕大小动态的改变一些属性，比如字体、宽度等。
如果这样写
@media
screen
and
(
max-height
:
568px
) {
}
screen
and
(
max-height
:
568px
) {
}
根据视口的高度来界定是否应用小屏幕的属性
但这会造成一个问题。
手机浏览器打开网页的时候一般都带有header地址栏和footer操作栏，这两个东西本身会占用一定的高度，导致某些时候你明明不想它应用媒体查询中的属性，而因为地址栏与操作栏的存在而错误应用了媒体查询属性。
所以为了解决这个问题，建议这么写
@media
screen
and (
max-width:
320
px) {}
screen
and (
max-width:
320
px) {}
根据宽度来作为判断条件，一般情况下就ok了。
版权声明：本文为lzzattack03x原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。