设备像素(物理像素)和CSS像素(逻辑像素)
- 设备像素
设备像素指的就是设备常说的分辨率。如iPhone6分辨率为750*1334，则iPhone的屏幕横向共有750个物理像素，纵向共有1334个像素。设备的物理像素是不会变的。
- CSS像素
CSS像素是独立于设备的逻辑像素,前端布局所用的像素就是指的CSS像素。一个CSS像素在屏幕上所占的位置大小不是固定的，和屏幕的缩放有关。
- 设备像素比(device pixel ratio)
DPR在缩放比例为1的情况下：
设备像素比(DPR) = 设备像素个数 / 理想视口CSS像素个数
例如iPhone6的DPR为2, 其分辨率为750*1334, 理想视口为375*667.
移动端的三个视口
在PC浏览器中，视口只有一个，并且 视口的宽度 = 浏览器窗口的宽度
- 视觉视口
视觉视口即屏幕所看到的区域。
- 布局视口
前端所做的布局多是基于布局视口的,在移动端布局视口和浏览器窗口没有关联,正常情况下，布局视口要比浏览器窗口要大。
布局视口跟视觉视口不一样，它不是指设备屏幕区域，它是为了解决PC 端网站在移动端显示不佳的一个解决方案。布局视口通常比设备屏幕宽得多，一般为980px，但也不是唯一，在不同的浏览器中也会有所不同如：在Safari iPhone中布局视口的宽为980px，在Opera中布局视口宽为850px ，在Android WebKit 中布局视口宽为800px，而在IE中布局视口宽为974px。
可以通过document.documentElement.clientWidth/Height获取浏览器的布局视口的宽度和高度。
- 理想视口
理想视口即理想的布局视口。在开发移动端页面时，在head中加入
< meta name="viewport" content="width=device-width initial-scale=1.0">
上面那段代码告诉浏览器：将布局视口的宽度设为理想视口。所以，上面代码中的width指的是布局视口的宽 device-width 实际上就是理想视口的宽度。
initial-scale控制布局视口CSS像素的缩放。
initial-scale会影响布局视口CSS像素个数。
理想布局视口CSS像素个数 = 设备分辨率 / DPR
媒体查询
@media 媒体类型 and (max-width : 400px) and (min-width : 310px){
}
媒体查询特定条件下使用指定的样式。上述max-width指布局视口的width不大于某一值。
还原设计稿
在移动端页面开发中,设计稿一般是以iPhone6为标准的, 宽度为750px。为了在不同屏幕上适配，元素就不能用绝对大小的单位，需要使用相对单位。
- rem
rem即根元素html标签font-size的大小。如html标签的font-size为12px,则1rem = 12px。
在开发移动端页面时常使用rem。
为了方便计算，将px单位转换为rem, 可以设置html的font-size为100px, 则设计稿的宽度为7.5rem.
对于不同分辨率的移动设备，只需根据布局视口宽度，设置合适的font-size大小，则实现了等比例缩放。
可以使用以下代码
<meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no">
<style>
html{
width : 7.5rem;
}
</style>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'
</script>
参考
