像素与单位

参考设备iphone5

分辨率： 640px * 1136px

设备像素比 = 640(物理像素) / 320(独立像素) = 2

像素相关

1.什么是设备像素比devicePixelRatio？（设备像素比 = 设备物理像素/设备独立像素）

2.什么是设备物理像素？简单地说就是竖向手持设备的x轴的像素值，如640*1136中的640就是物理像素

3.什么是设备独立像素(dip)？简单地来说设备独立像素就是：独立于设备的用于逻辑上衡量像素的单位。如320px

4.window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

视口相关

视口分 3 种

1. 布局视口 960px ，布局视口不会被改变的
2. 可视视口 即设备上可见的视口，使用手指缩放时改变的是可视视口的大小
3. 理想视口 是指布局视口在一个设备上的最佳尺寸，便于使用浏览器浏览，阅读

<!--  指定下面的代码后，布局视口就成为理想视口，阅读体验会更好，网页不会出现被放到的效果 -->
<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的兼容性更好