聊一聊移动端适配

 今天来聊一聊移动Web适配的一些话题。

像素

分为两种：物理像素和逻辑像素（也叫css像素）

物理像素：也就是我们屏幕的分辨率，比如1920*1080

逻辑像素：也叫css像素，这个是前端开发人员要用到的，也就是将设计图转化为网页的时候，要进行还原的像素。

我们的网页在浏览器里渲染的时候，需要浏览器将css像素转化为物理像素，转换的过程中1个css像素对应多少物理像素由浏览器决定。默认情况下，在pc端1个css像素 = 1个逻辑像素。

视口

屏幕中显示网页的区域，默认情况就是html根元素的宽度，即屏幕的100%，视口的大小也就是我们css像素的大小。

我们可以通过control+鼠标滚轮来放大和缩小浏览器窗口大小，这个放大和缩小的过程就是改变视口大小的过程。

我们当前屏幕的物理分辨率是1680*1050。接着滚动鼠标滚轮将浏览器窗口扩大为原来的两倍，此时我们只是将浏览器的窗口扩大了，但真正的硬件的物理像素是不变的，我的屏幕物理像素横向是1680个小点，现在还是1680，变化的只是我浏览器的css像素，默认情况下我的视口是1680px，1个css像素对应1个物理像素，但是随着我浏览器窗口被扩大了两倍，当前的视口变成了840px，css像素/物理像素 = 1/2，也就是1个css像素对应2个物理像素，css像素被拉大了，这也就是为什么我们看到的内容都变大的原因。

 

当我们的屏幕被放大的越多则这个时候视口越小，我们看到的网页元素会变得越来越大同时我们所能看到的内容区会越来越小。就像我们拿着放大镜看物体，离得越近物体越大，但是我们聚焦的物体面积却在减小，我们可以通过这种方式来计算css像素和物理像素的比值。

结论：调整视口大小可以改变css像素和物理像素的比值。

将pc端内容搬到移动端产生的问题

pc端写的页面其实能够放到移动端展示，但是，呈现的效果不尽人意，pc端显示正常的内容在移动端会显得特别小。

原因如下：

第一：手机上面的像素大小要小于pc端的像素大小，注意，这里是从像素大小上来比较而不是像素数量

一般我们24寸的电脑屏幕，物理分辨率在1920*1080。以iphone6为例，屏幕尺寸4.7寸，物理分辨率是750*1334。

计算一下我们会发现iPhone6的单位尺寸像素点数量远远大于电脑像素数量，单位面积像素数量越多那么每一个像素所占的面积就越小，像素密度就越高，图像显示也就越清晰。手机尺寸本身就不大，单个像素大小又远远小于电脑的像素大小，所以同样的设计图，搬到手机上肯定会变小。

第二：默认移动端都会将视口设置为980px（css像素），超过980像素的网页通常会被浏览器等比例缩放到视口内，以方面用户查看完整网页内容，pc端的网页在手机上会被等比例的缩小，所以内容不方便阅读。

为了解决这个问题，让移动端网页显示的内容大小适中并方便用户观看，移动端出现了很多适配方案，比如媒体查询，viewport视口缩放。

通过改变视口的大小来解决移动端的适配问题之viewport

上面已经得出了可以通过调整视口来改变css像素和物理像素的比值这一结论，并且css像素/物理像素的值越小，内容被放大的越多；

我们现在要解决的就是在不同的移动端设备调整一个最合适的css像素/物理像素的像素比，这样我们的内容会被放大到正好让用户浏览页面时很舒服，字体和排版都刚刚好；

那我们如何设置呢？这里面就涉及到viewport的概念了。

视口的调整方式是通过meta标签来实现的，meta的name值设置为viewport，content属性里面通过设置width宽度就能动态调整视口大小了。

例如width=375px就是将视口设置为375像素。

因为不同移动设备的视口大小是不一样的，所以设置成一个固定的值不能解决根本问题，这时候我们就要用到另一个属性值device-width，device-width的意思是当前设备的视口宽度，让width=device-width是最完美的解决方案。

完整写法：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

移动端的设计稿

我们以iPhone6为例，它的视口大小是375px，它的物理像素是750px，像素比是375/750 = 1/2。

这时我们的设计图如果设计成375px，那么一个css像素会被放大两倍到物理像素，这样设计图显示到屏幕上就会出现放大失真，所以，我们的设计图现在的尺寸大部分是750或者1125像素，针对的就是二倍屏和三倍屏，设计的尺寸就是你放大后的效果，这样就抵消掉了失真对网页的影响。

设计稿的问题解决之后，还有一个问题需要解决，就是同一套设计稿在不同移动设备下显示也是存在差异的，比如iPhone6，它的视口是375，而iPhone6 plus的视口是414，那这个时候，一张375的设计图能够在iPhone6上完美显示，但在plus上就会缺少一部分，填充不满屏幕。为了解决这个问题，我们要做到动态适配，也就是等比例适配设计图，这个时候就要引出一个单位vw。

vw在移动端的适配应用

vw是一个长度单位，并且100vw等于一个视口宽度，它是一个相对单位；1vw = 1%视口宽度。

这个时候我们就能将750像素换算成100vw即是一个视口的宽度，并且我们还能计算出来，0.133333333vw = 1px。这样我们设计图里面元素的宽高都能计算出来了，而且这些计算好的元素大小都是基于我们的视口动态变化的，这样就解决了设计图不能适配多个设备的问题。

写代码的时候我们很快会遇到另一个问题：都是小数点，计算起来很麻烦，每次布局的时候还要先算一下，费时费力，有没有好的办法解决呢？

vw、rem、预处理语言stylus来升级我们的开发体验

rem的大小和html根字体大小相关，可以通过修改html的文字大小来改变整个页面中元素大小，实现整体控制。

这里面我们先将html根标签的font-size选定一个基准值，假设是75px，也就是1rem = 75px。

我们的设计图时750px，这个时候100vw = 750px，1vw = 7.5px。

因为我们设置的根节点基准值是75px，那根节点换算成vw的话就是：

75px = 7.5px * 10 = 1vw * 10，根节点的大小是10vw。

接下来就是设计图的布局了，因为设计图里面的元素大小都是基于根节点进行布局的，所以，假设一个元素长和宽都是150px，因为1rem = 75px ，所以150像素 = (150/75)*1rem = 2rem。

我们在还原设计图的时候，直接用元素的尺寸/基准值就行了，这时候我们引出stylus预处理语言，方便我们计算。

设置一个函数：

$base = 75
rem(dom)
  (dom / $base) * 1rem

这样就能方便的计算尺寸，愉快的布局了。
例如：

.box 
  width: rem(150)
  height rem(150)