开发移动端页面必须要懂的几点

设备像素(物理像素)和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大小，则实现了等比例缩放。

可以使用以下代码

参考

一篇真正教会你开发移动端页面的文章(一)

一篇真正教会你开发移动端页面的文章(二)

设备像素，设备独立像素，CSS像素

meta viewport 你真的了解吗？