移动端

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

设备像素(物理像素)和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>

参考

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

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

设备像素,设备独立像素,CSS像素

meta viewport 你真的了解吗?