移动端如何做适配？

1. meta viewport

首先手机端要加meta
<meta name="viewport" content=" width=device-width, user-scalable=no,
initial-scale = 1.0 , maximum-scale = 1.0, minimum-scale=1.0"

历史发展中，最开始我们的页面都只是给pc用的，因为没有智能手机
，后来有了诺基亚，但诺基亚也不是智能手机，诺基亚访问的网站是专门做的，编写语言是wap,
wap语法跟html很像，但不是html的。所以如果要想你的网站给用户用，
你需要做一套html版本的和wap版本的，这样诺基亚用户和pc用户就可以使用你的网站了。
诺基亚之后就出现了苹果第三代，在中国很火。但是有个问题是，苹果第三代只有 320像素宽。但是中国的网站都是900多像素的。
那么320像素的苹果怎么去显示900多像素宽的网站内容呢？
苹果就想了一个办法：把所有的网站都缩小，缩小到320像素的屏幕中去，
如果用户想看的话，就用两个手指去放大。然后来回拖动，这样你就可以看到完整的内容了。
这就是为什么页面要缩放了，因为一开始网站都是900多像素宽，而设备宽度300多像素，如果不能缩放的话，就没办法看到完整内容了。
缩放的比例怎么定呢？那就是用页面去模拟980像素的宽度。
也就是说，你在320像素上看到的内容与980像素的pc上看到的是一样的。
当你在谷歌浏览器中打开模拟器，选择iphone6,然后打印出 document.documentElement.clientWidth 的值，会发现他是 980.
iphone6的手机分辨率是375px，那为什么上面的值打印出来的是980呢？
这就是上面提到的，用375像素去模拟980像素。

那发展到现如今，我们会针对手机用户再做一个站点，与pc端分开的一套代码。
比如淘宝的我们用手机去访问的时候就是 https://www.taobao.com/,用手机浏览器去访问的时候：https://h5.m.taobao.com/
这个时候我们有两套了，就不需要他缩放了。
所以这个时候，只要做一件事情那就是告诉浏览器不用给我缩放了。因此我们在做手机端适配的时候，就要用到上面那行代码：
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"

width=device-width:意思就是不要用980了，设备多宽就多宽，
user-scalable=no: 用户是否可以缩放？不能，我已经适配好了，你不用缩放了
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0：初始的缩放倍数，最大缩放倍数，最小缩放倍数都是1.0


复制代码

2.使用媒体查询

@media (max-width: 500) {
    .color{color: red;}
    在屏幕宽度小于500像素时才会生效
}
@media (min-width: 300 and max-width: 500) {
    屏幕宽度在 300到 500之间的就生效
}

复制代码

有了以上两个就可以做响应式布局了。

移动端与手机端不同： 
1. 移动端没有hover
2. 移动端有touch事件
3. 移动端没有resize：不能放大缩小
4. 移动端上没有滚动条
复制代码

3.rem

1.rem是什么？
css有很多的长度单位：px（像素） ，em ，rem, vh, vw

1em相当于一个M的宽度，或者一个汉字的宽度，
1em气死差不多就等于自己的font-size值，比如 div{font-size:16px;height:2em} 那么这个高度就是2*16=32px，可以这样记下来

rem: root em :意思就是根元素的font-size,也就是html元素的font-size，
比如：html的font-size是16px 那么 1rem = 16px 

vh: viewport  height 即视口的高度  100vh == 视口高度
vw: viewport width 视口宽度  100vw == 视口宽度
详细可参考MDN

2. 12像素法则
12像素法则的意思是，在chrome浏览器中，是可以设置页面最小字号的，默认最小字号是12px,如果你再网页中写了font-size:6px，也不会生效，看到字体也会是12px的
注意：!!网页的默认font-size是16像素，面试题：请问如果我不给页面上元素加font-size那么他的font-size是多少，默认是16px
复制代码

4. 动态rem

为了使页面在所有设备上都能按比例还原，我们得出：
一切单位以宽度为基准，就能保证完美还原设计稿。
但是各个单位如 px rem 等都跟宽度是没有关系的。
所以IT工程狮们日思夜想，通过js使得rem与页面宽度产生了关系：
只要使html得font-size等于页面的宽度，rem又是依赖于html的font-size的，
那么1rem 就等于 页面的宽度了。
js代码：
var pageWidth = window.innerWidth;
document.write('<style>html{font-size:'+pageWidth+'}</style>')
那么这个时候就可以在写宽高的时候用rem的单位去写了
复制代码

5.对rem进行微调

第四中的代码，我们在写的过程中会发现，所有的数值都变成了小数，0.4rem,0.2rem等等，那么其实我们可以把font-size变成原来的1%,这样我们在写宽高的时候就可以不用写小数了，可以写成width:40rem等等

但是还会导致一个问题是，在chorme浏览器中有可能会错乱，因为在chrome中页面的font-size不能小于12px（上面提到的12像素原则）。那么下面这种写法，就会导致font-size会小于12px 有可能还会远小于，所以可以不用除以100，除以10就可以了

document.write('<style>html{font-size:'+pageWidth/100+'}</style>')
复制代码

1px是最小的单位了，已经不能再小了，所以比如说border为1像素的就直接写成border:1px solid blue;不用再去换算成rem了，font-size也直接写px

6.px 2 rem

如何将px自动换算成rem, (题外话:1.学会命令行 2. 学会英语 3. 学会看文档。掌握以上三个，就可以好好学会less sass webpack等技术） npm config set registry https://registry.npm.taobao.org/：将安装包的下载源切换成淘宝的，使用sass的px2rem