概念
移动时代的今天，现如今随着智能手机的不断发展，移动端搜索的比例也在不断增加，而传统的PC站点在手机端的用户体验度很差，这容易导致大量用户的流失，所以做一个对应的手机站是非常有必要的前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有(tong)趣(ku)呢
话不多说，下面就总结了一些移动端常用的适配手法：
一、百分比
使用场景：只要求宽度随屏幕自适应，比如文字块
百分比在PC端自适应上也经常用到，着实相当好用，但它一般用于宽度自适应的设置，高度设置百分比时，要求其父类元素有明确高度。
1、利用百分比实现填充全屏
为了让元素设置height：100%生效，并且正好为窗口高度，则需要给html和body元素以及它所有的父元素都设置高度100%。
例如：
1
2
3
4
5
6
7
在使用height: 100%;时需要注意的一些事项Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。
如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。
写到这里我突然想插个题外话，对于absolute定位的元素，用height：100%显然也是无效的，因为此时它已经脱离了文档流，此时它的高度由自身内容撑开。这是如果我希望它填满父盒子，怎么做？这里有个黑魔法，设置它的top,left,bottom,right均为0，这时盒子就会被拉伸至填满父盒子。
2、利用百分比实现宽高比固定
有时，我们希望宽度自适应，高度随宽度变化而变化，并有固定的宽高比。
让我们缕缕，用height百分比显然不行，height百分比是以父元素高度为基准的，而我们需要以宽度为基准来设置高度。
所以这里可以用到padding-top或者padding-bottom，padding是以父元素的width为基准的。我们可以设置元素的height：0，然后用padding-bottom将元素撑开，以实现固定宽高比。
二、rem
使用场景：对于图片等对高度自适应有要求的场景
rem单位：以页面根字体的大小，也就是html元素字体的大小为基准，例如
1
2
3html{
font-size:16px;
}
那么1rem等于16px。
所以使用时，我们只要让根字体大小随屏幕大小自适应，那页面中所有使用rem单位来设置宽高的元素，大小也会随屏幕大小自适应了。
根据不同屏幕大小设置根字体大小有两种方法：
1、css方法设置rem
利用媒体查询，根据不同的屏幕大小进行设置，缺点就是一般只列举一些代表性的屏幕大小，自适应不能充分覆盖所有范围
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38html{
font-size:10px
}
@media screen and (min-width:321px) and (max-width:375px){
html{
font-size:11px
}
}
@media screen and (min-width:376px) and (max-width:414px){
html{
font-size:12px
}
}
@media screen and (min-width:415px) and (max-width:639px){
html{
font-size:15px
}
}
@media screen and (min-width:640px) and (max-width:719px){
html{
font-size:20px
}
}
@media screen and (min-width:720px) and (max-width:749px){
html{
font-size:22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px){
html{
font-size:23.5px
}
}
@media screen and (min-width:800px){
html{
font-size:25px
}
}
2、JS方法设置rem
利用JS设置根字体大小，所以若改变发生在渲染完成之后，则会引起回流，导致闪屏现象。因此使用这种方法时，应将JS代码放入head头部中并且在CSS引入之前。
1
2
3
4
5
6
7
8
9
10
11
12(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 375) + 'px';
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
上面clientWidth为实际屏幕的宽度，而375为设计稿基于的参考屏幕宽度，20则是当实际屏幕宽度等于参考屏幕宽度时，1rem的大小。代码的关键参数20和375是这样设置的：
a) 由于提供的设计稿现在基本都是以iPhone6/7/8为参考的，宽度为750px，dpr为2，所以计算rem时的参考屏幕宽度可以设置为375。
b) 由于chrome的最小字体是12px，又为了计算方便，所以可以设置1rem的大小为20px
应用过程中，比如我们拿到了一个750的设计稿，那么首先，将设计稿里的数值除以2，得到按手机屏幕大小布局的数值(这也是375的由来)。然后，再除以20就可以将设计稿中的px转化为rem了。
三、媒体查询
使用场景：一般利用媒体查询来进行特殊处理，比如
1、iphoneX这类全屏的适配
2、在适配dpr为3的iPhone Plus或者pad横屏等超级大屏时，需要根据业务需求设置临界值，然后展示不同内容或者替换不同分辨率图片(也就是常说的2倍图、3倍图的使用)等
四、vw、vh
vw是以屏幕宽度为基准的百分比单位，1vw=1% * deviceWidth
vh是以屏幕高度为基准的百分比单位，1v=1% * deviceHeight
vw,vh确实很好用，但是目前使用时仍需考虑兼容性的问题，在国内一些手机自带浏览器里(比如华为)会失效，并且据说碰上X5内核时也容易踩坑 。
五、适配最常见的操作方法
据观察，PC站和手机站匹配最常用的几种方法是移动适配、JS跳转、Meta声明、302规则等等，由于每种方法的操作方式不同，产生的效果也不同，具体的优缺点也需要区别对待，在此就给大家比较一下这4种适配方法的优缺点以及需要注意的地方：
1、移动适配
现在很多搜索引擎都提供移动适配的功能，例如百度的开放适配和360的移动适配，利用百度站长工具提交PC页-手机页对应关系Sitemap，或者利用360站长工具提交PC页-手机页对应关系txt就能实现PC站内容和手机站一一适配。 这样做的优点是只需要在搜索引擎工具提交资料，无需对站点本事做改动，而且网站内容一一对应，并不只局限于网站首页。 缺点就是只能在百度或者360移动搜索中生效，其他没用提交适配文件的搜索中就无效了。
2、JS跳转
JS跳转对于某些行业来说有着重要的作用，尤其是对于用户转换率网站首页较高的网站，只需要在网站的头部加一段JS代码判定是否是移动端访问，然后所有的流量就会全部流向手机站的主页。 JS跳转的优点是适用于所以的移动搜索，并不局限于百度和360，可以提高用户的转换率。 缺点是难以实现每个页面的一一对应，而且容易被某些搜索引擎判定作弊，从而受到惩罚。
3、Meta声明
Meta声明的格式一般为，站长可以将这段代码加在PC站的头部，由Meta信息来指明该PC页对应的手机页的URL，以及该URL对应页面的格式。 Meta声明的优点是代码简单易懂，操作方便。 缺点是只能在百度移动搜索中生效，对于其他搜索引擎无效。
4、302规则
302规则指的是，当判定移动端访问网站时，302临时跳转到一个网址(手机站)，例如可以在htaccess文件里加上一段判定手机的代码，做个302重定向。 这样做的好处是，不需要再额外在网站的前端代码中加任何东西，也不需要向搜索引擎提交规则，可是据测试，有可能会导致PC站被降权。 虽然302是暂时性的重定向，但过于频繁的302是很有可能给网站带来不利的影响的，具体的尺度需要站长自己去把握。 以上4种适配方法是最为常见的操作方法，通常PC站做了以上处理后，一段时间以后移动端搜索出来的结果，下面匹配的网址就变成了移动站网址，不过标题还是PC站标题。 至于到底哪种方法更好，更倾向于第一种，毕竟百度移动搜索占据着网站的大部分流量，而且用户体验度也最好。
