【知识】微信端H5使用媒体查询进行适配
【页面高度】
制作好H5页面在微信端打开的时候，由于微信导航栏和手机状态栏的存在，会使得网页的实际高度小于手机屏幕的高度。
对于iphone来说，这个高度是64px。所以在实际页面设计过程中，需要考虑到这个高度。
参考文章：微信设计尺寸兼容
【媒体查询】
要注意的是，媒体查询实际上查询的是pt而不是px。也就是说，是逻辑分辨率而不是物理分辨率。
比如，iphone6的逻辑分辨率是375*667, 而物理分辨率是750*1334，即1pt = 2px。
所以我们在利用媒体查询适配iphone6的时候，写法如下：
@media only screen and (min-device-width: 375px) and (min-device-height: 667px) {
}
这里提及到了min-device-width和min-device-height，那它和min-widht和min-height有什么区别呢？
媒体查询中，min-width、max-width的查询即是对布局视口宽度的查询。
而min-device-width和max-device-width的查询实际是对设备屏幕宽度的查询。不随着设备横屏和竖屏进行改变。
这里我们之所以使用device-height的原因是，也是【页面高度】中提及到的，微信顶部栏的存在，会导致实际微信浏览器的高度height小于屏幕高度device-height。此时若用height就会导致判断不准确。
参考文章：手机分辨率如何写响应式布局、device-width和width之间的区别、移动前端开发之viewPort的深入了解
