移动Web怎么作屏幕适配

壹 | Fisrt

移动端适配的是什么？

咱们讨论的是网页适配多种尺寸屏幕，让网页效果看起来和设计师的设计稿同样。说白了就是同一套代码在不一样分辨率的手机上跑时，页面元素间的间距，留白，以及图片大小会随着变化，在比例上跟设计稿一致。

举个粟子吧

图1.  260*400的屏幕  

图2.  380*400的屏幕

　　上边的页面在不一样大小屏幕上的展示，咋一看没什么问题，通常的工程师会认为已经OK了，因此前端工程师很容易忽略屏幕适配。可是对于一些精益求精的产品而言，这还达不到要求。例若有如下问题：

1. 图1的屏幕的尺寸较小，所以头像应该小些，话题左边的空白也应该小一些。
2. 图片应该保持正方形，并且两张图之间的边距应该随屏幕变化而变化

明白了，因此padding，margin，图片等的大小基本都要作适配

 

貳 | Second 

那有什么方法能够作到这种适配？

关键要找到一种长度单位，使得同样的取值，在不一样尺寸的屏幕上的大小按比例缩放。

长度单位我只知道px 😂

我将在下一期的文章里推有关viewport和css像素px中的细节，这篇文章只关注如何适配，因此先只谈结论：

1. 网页在viewport中布局，viewport被分红一个个小方块，一个CSS像素占一个方块
2. 在设置了viewport宽度等于设备宽度的状况下，经过某种算法，在不一样大小的屏幕上，1个CSS像素所占屏幕的物理尺寸是同样大的

既然1个CSS像素在不一样屏幕上物理尺寸同样大，那px确定不能作为适配的方法了

长度单位rem是相对于html标签的font-size来计算的。例如html标签设置font-size:36px，同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=36px*1.2=43.2px

如上面的例子，若是加载页面的时候，使用JS根据屏幕的大小动态设置html标签的font-size，随着html标签font-size的值变 化，div的1.2rem换算成px的值 也跟着变化，即实现了div随屏幕大小变化而变化，而CSS代码始终是width:1.2rem。以此类推到页面全部的元素。

明白了，奥秘就在于结合px的固定尺寸和rem的相对尺寸！

  

叁 | Third 

啃先生，原理我明白了，你有没有可执行的具体方案 😳？

业内比较流行的作法（参考阿里的flexible），有如下要点：

1. 设置viewport为设备宽度（这里不必定，但目前先这样足矣）
2. 将viewport分红10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size（分红10rem只是为了方便计算而已）
3. 写CSS代码时，遇到要适配的地方，好比width，margin，padding等，就不要再用px了，改为用rem

JS和Html代码以下：

 

CSS代码作了相似以下的修改：

运行结果以下：边距和头像图片都随屏幕变化而变化了

  

 

 

肆 | Fourth

代码量不多，就是要理解消化。有一个问题，设计师给的设计稿尺寸单位都是用px，可是刚刚说的第3步，写CSS的时候要用rem，这个怎么换算？会很麻烦

现有设计师提供宽度为400px的设计稿，其中某个图片的宽度设计为20px，那么，CSS的写法就是img{width: 0.05rem;}，怎么得出这个结果的呢？

1. 设计稿的宽度视同手机宽度，即假设有一个viewport为400px的手机
2. 将它分红10rem，每一个rem为40px;
3. 那么图片宽度20px天然就是0.5rem;

且慢，岂不是意味着，每次写到尺寸的地方，我都要先在草稿纸上把设计师给的px换算成rem？别急，sublime text 3有一款插件能够帮助你进行这个换算，你只须要输入20px，它会自动帮你换算成 0.5rem，看如下图就秒懂了

 

　　参考

---

 

1. 使用Flexible实现手淘H5页面的终端适配（https://github.com/amfe/article/issues/17）
2. 移动端高清、多屏适配方案（http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041）
3. A tale of two viewports（http://www.quirksmode.org/mobile/viewports.html）