在做移动端h5响应式使用css媒体查询属性时的小技巧

在做移动端的h5时，要使用媒体查询属性根据手机屏幕大小动态的改变一些属性，比如字体、宽度等。

如果这样写

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

根据视口的高度来界定是否应用小屏幕的属性

但这会造成一个问题。

手机浏览器打开网页的时候一般都带有header地址栏和footer操作栏，这两个东西本身会占用一定的高度，导致某些时候你明明不想它应用媒体查询中的属性，而因为地址栏与操作栏的存在而错误应用了媒体查询属性。

所以为了解决这个问题，建议这么写

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

根据宽度来作为判断条件，一般情况下就ok了。