移动端布局-分辨率和视口

客观上，客户端浏览器中用于呈现网页的区域大小不同，即viewport(视口)不同，主观上，我们的页面代码又想给每一位用户完美的体验，这就需要网页具有变通的能力，让布局和呈现能够根据视口的变化而变化。

响应式布局可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。

要实现响应式布局，先要理解几个概念：

物理分辨率和逻辑分辨率

我们再买手机的时候应该都留意到了一个重要的指数，就是分辨率，在手机中实际上有两个分辨率，一个逻辑分辨率，一个物理分辨率。

• 物理分辨率是指屏幕图像的精密度，是指显示器所能显示的像素有多少。由于屏幕上的点、线和面都是由像素组成的，显示器可显示的像素越多，画面就越精细，同样的屏幕区域内能显示的信息也越多。
  以iPhone6为例，分辨率为750×1334的屏幕来说，即每一条水平线上包含有750个像素点，共有1334条线。
• 逻辑分辨率：如果说物理分辨率是硬件所支持的屏幕分辨率，那么逻辑分辨率就是软件支持的分辨率，早期的手机如：iPhone3，逻辑分辨率和物理分辨率相等，那么网页中的1px横线就占用手机的一行的320个像素，而现在的物理分辨率大多是逻辑分辨率的倍数，网页中的1px横线就占用手机的两行、三行…

相应的手机中的一个像素有逻辑像素和设备像素之分，简单的说我们在CSS中设置的像素值不等于在手机中显示的像素值，不信你可以用手机截图看看。

• 设备独立像素（Device Independent Pixel）：是逻辑像素，与设备无关的，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素。
• 设备像素（Device Pixel）：是物理像素，设备能控制显示的最小单位。

在前端领域，主要用的是CSS像素，是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在。一个CSS像素在移动端真实显示多少像素要看物理像素与逻辑像素得比率，如iPhone6的物理像素是750px×1334px，逻辑像素是365*667，倍率是2，那么css中设置的1px就在设备中占用2个像素点。

倍率也叫设备像素比(device pixel ratio )，简写为dpr
设备的逻辑像素和物理像素的关系满足如下公式：
逻辑像素宽度倍率 = 物理像素宽度
逻辑像素高度倍率 = 物理像素高度

视口 viewport

视口是浏览器上用来显示网页的那部分区域。用来约束网页中最顶级块元素html标签。viewport分为visual viewport,layout viewport,ideal viewport。
普通pc屏幕三者相等；移动端的情况就比较复杂。

1、Layout viewport（布局视口）

layout viewport是浏览器设置的默认显示大小，由浏览器厂商决定，一般为980px。

智能手机盛行后，迫切需要在手机浏览器上也能够浏览网页，但是问题来了，因为手机屏幕太小，用户并不能很好地通过手机等设备访问网页。Apple的解决方案是在Safari中定义了一个viewport meta标签，用来创建一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px，因为与PC端的网页主流宽度宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构不会被破坏，如果网页的宽度超出980px，则出现横向的滚动条。

iOS, Android浏览器的layout viewport基本都是: 980px
BlackBerry浏览器的layout viewport: 1024px

在手机上如果layout viewport是980px,而手机的物理分辨率750px,相当于在750的空间内显示980的内容，实际上是对网页进行了整体的缩小，缩小后文字的小于12px,线条小于1px,将被分别显示为12px和1px。
见下图，图片中98px98px的绿色方框实际显示为75px75px;13px和12px的文字显示为12px,16px文字进行了相应的缩小;1px的线条还是显示为1px

这样的页面显然不利于阅读，多数情况下移动端的布局需要通过viewport元标签调整layout viewport的大小来避免这个情况。

2、visual viewport（视觉视口）

visual viewport（视觉视口）是手机屏幕的可视区域，大小就是屏幕显示器的像素分辨率；visual viewport是设备决定的

3、Ideal viewport（理想视口）

Ideal viewport就是我们通常说的屏幕逻辑分辨率。因为前面讲过的css像素是逻辑的，虚拟的，具体在手机中显示几个物理像素取决于设备，Ideal viewport相当于浏览器给我们前端用的、能真正用来显示网页内容的区域，所以移动端布局是我们设置layout viewport等于Ideal viewport，来方便我们使用css布局。

viewport元标签

移动设备默认的viewport是layout viewport，通常是980px,通常情况下我们通过修改这个值还完成移动的适配，这是移动的常用的一段代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

这样做是将layout viewport的宽度设置为 ideal viewport的宽度，指定页面的初始缩放比例为不缩放，指定用户能够放大的最大比例为1，不允许用户缩放视口。

属性	说明
width	控制 layout viewport 的大小。
height	和 width 相对应，指定高度。
initial-scale	初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale	允许用户缩放到的最大比例。
minimum-scale	允许用户缩放到的最小比例。
user-scalable	用户是否可以手动缩放

这个设置不是一定的，可以根据需要进行设置，工作中可以通过设置layout viewport为逻辑分辨率也可以设置为物理分辨率，下图以iPhone6为例，设置 layout viewport为375和750对比下显示效果。

绝对单位和相对单位

绝对单位：像素单位,px就是绝对单位

相对单位:

rem和em相对单位

rem（font size of the root element）是指相对于根元素(html)的字体大小的单位
em（font size of the element）是指相对于父元素的字体大小的单位。
它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

vh和vw相对单位

相对单位，是基于视窗大小（浏览器用来显示内容的区域大小）来计算的。
vw基于视窗的宽度计算，1vw 等于视窗宽度的百分之一;
vh基于视窗的高度计算，1vh 等于视窗高度的百分之一。

移动端布局目前最常用的是rem,配合媒体查询，设置不同的 html元素 的 font-size，不同分辨率下1个rem实际的像素值就是不同的，这在移动端非常重要。