参考设备iphone5
分辨率： 640px * 1136px
设备像素比 = 640(物理像素) / 320(独立像素) = 2
像素相关
1.什么是设备像素比devicePixelRatio？（设备像素比 = 设备物理像素/设备独立像素）
2.什么是设备物理像素？简单地说就是竖向手持设备的x轴的像素值，如640*1136中的640就是物理像素
3.什么是设备独立像素(dip)？简单地来说设备独立像素就是：独立于设备的用于逻辑上衡量像素的单位。如320px
4.window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
视口相关
视口分 3 种
- 布局视口 960px ，布局视口不会被改变的
- 可视视口 即设备上可见的视口，使用手指缩放时改变的是可视视口的大小
- 理想视口 是指布局视口在一个设备上的最佳尺寸，便于使用浏览器浏览，阅读
<!-- 指定下面的代码后，布局视口就成为理想视口，阅读体验会更好，网页不会出现被放到的效果 -->
<meta name="viewport" content="width=device-width"/>
<!-- 还可以这样 -->
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, //最小的缩放比例
maximum-scale=1.0, //最大的缩放比例
user-scalable=no //禁用用户缩放
" />
单位相关
px/em/rem的区别
- 1px = 1像素，使用px作为单位是可控性比较强，可以100%还原设计稿
- em是相对长度单位：
- em 相对参考物为父元素的font-size，父元素没有设置font-size就找祖先元素的font-size
- em具有继承的特点
- 当没有设置font-size时，浏览器会有一个默认的em值，即1em=16px
- em的参考物很不稳定，所以有时会出现混淆的效果，使用过程中一定要逐级确认
- rem是相对于html为参考物的长度单位（ie8不支持）
- rem和em没有多大的区别，只是相对参考物不同，rem单位的长度以根元素html所设置的font-size为准
1.当在媒体查询中使用rem作为单位时，rem会以浏览器的默认值作为相对长度值，即1rem = 16px，不再是以html作为相对长度了(媒体查询的优先级比较高，会先html中的样式)
2.在媒体查询中建议使用em,em的兼容性更好
