背景

如今事情中有凌驾一半的时候用于挪动端项目标开辟，包含app嵌入页，微信页面和挪动wap页。

开辟挪动端页面跟开辟PC页面的一个大区分就是挪动端对相应式规划的请求更高，不能像PC页面一样设想几个断点应用媒体查询，双方留空缺就处理。挪动端页面须要把屏幕空间都应用上，而挪动装备的尺寸和分辨率多种多样，处理挪动端页面的自适应规划题目是搭建新的挪动端项目标重点和难点。

经由研讨，我在公司的多个挪动端项目运用了REM规划来处理挪动端自适应规划的题目。

REM引见

rem（font size of the root element）是指相对于根元素的字体大小的单元。简朴的说它就是一个相对单元，rem规划是一个盛行的处理挪动端相应式规划的计划。在页面初始化时，运用JS依据屏幕的尺寸和dpr等信息设置rem的大小，而在css中写下元素的高度等信息时，运用rem。如将rem设置为100px，则元素的高度为36px时，须要将元素的高度写成0.36rem。字体大小能够须要写成0.12rem等，可读性较差，输入起来也不方便，降低了事情效率。

处理计划

在webpack中运用px2rem-loader。用法以下

    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'px2rem-loader?remUnit=75&remPrecision=8']
      }
    ]

如许便能够应对罕见的750px的设想图，直接根据设想图的尺寸来填写属性大小就好，
注重，还须要在html文件中引入flexible文件

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>

踩到的坑

微信浏览器假如退回的话，页面被缓存，然则js文件没有从新挪用，会致使规划杂沓。须要挪用pageshow事宜来处理

e.addeventListener('pageshow', function(e) {
    // d的作用是从新设置documentElement的fontsize为clientWidth的1/10
    e.persisted&&d()
})

深切相识

你或许会对flexible.js做了什么比较感兴趣。在这之前，须要简朴相识一下viewport的学问

viewport

meta标签

viewport meta标签有六个属性

1. width：设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
2. initial-scale：设置页面的初始缩放值，为数字，可带小数
3. minimum-scale： 许可用户的最小缩放值，为数字，可带小数
4. maximum-scale：许可用户的最大缩放值，为数字，可带小数
5. height 设置layout viewport 的高度
6. user-scalable 是不是许可用户举行缩放，值为”no”或”yes”

三种viewport

1. layout viewport 规划视窗

   网站的宽度，能够经由过程document.documentElement.clientWidth猎取，经由过程viewport meta标签设置

2. visual viewport——视觉视窗

   代表浏览器可视地区的大小，能够经由过程 document.documentElement.innerWidth来猎取

3. ideal viewport——抱负视窗

   跟挪动装备相干的viewport，挪动装备的宽度。iPhone的值是320

其他学问

visual viewport width = ideal viewport width / zoom factor

zoom factor能够设置initial-scale来掌握
当visual viewport = layout viewport时，页面无程度滚动条，恰好显现全部内容

假如不设置initial-scale，经由过程设置viewport meta的width为device-width，能够令layout viewport即是ideal viewport，从而到达页面无程度滚动条的结果

lib-flexible道理

1. 猎取dpr和设置dpr的倒数scale
2. 动态天生viewport meta，initial-scale值为scale
3. 设置rem为clientWidth(layoutview port width) 的1 / 10

这时候我们我们开辟项目只需注重屏幕的宽度是10rem就能够了

末了

实在REM计划重要还是以clientWidth的1/10为基本单元设置元素的尺寸来到达自适应的目标。能够运用VW来替代，也有px2vw之类的插件。

要到达自适应规划，还能够运用百分比、flex规划或是grid规划，这里就不细说了。

本文章为前端进阶系列的一部分,
迎接关注和star本博客或是关注我的github

参考

1. px2rem
2. 挪动前端开辟之viewport的深切明白