前言
前台代码的编写永远逃不过“兼容”二词，从前PC时代，由于IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设施的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~手机端的确不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，手机端因为展现区域比较小，因而对于页面在不同分辨率手机上的展现细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢
话不多说，下面就总结了少量手机端常用的适配手法：
一、百分比
使用场景：只需求宽度随屏幕自适应，比方文字块
百分比在PC端自适应上也经常用到，着实相当好用，但它一般用于宽度自适应的设置，高度设置百分比时，要求其父类元素有明确高度。
1、利用百分比实现填充全屏
为了让元素设置height：100%生效，并且正好为窗口高度，则需要给html和body元素以及它所有的父元素都设置高度100%。
例如：
`<``html` `style``=``"height: 100%;"``>``<``body` `style``=``"height: 100%;"``>``<``div` `class``=``"wrap"` `style``=``"height: 100%; width:100%"``>``填充全屏啦``</``div``>``</``body``>``</``html``>`在使用height: 100%;时需要注意的少量事项
写到这里我忽然想插个题外话，对于absolute定位的元素，用height：100%显然也是无效的，由于此时它已经脱离了文档流，此时它的高度由自身内容撑开。这是假如我希望它填满父盒子，怎样做？这里有个黑魔法，设置它的top,left,bottom,right均为0，这时盒子就会被拉伸至填满父盒子。
2、利用百分比实现宽高比固定
有时，我们希望宽度自适应，高度随宽度变化而变化，并有固定的宽高比。
让我们缕缕，用height百分比显然不行，height百分比是以父元素高度为基准的，而我们需要以宽度为基准来设置高度。
所以这里可以用到padding-top或者者padding-bottom，padding是以父元素的width为基准的。我们可以设置元素的height：0，而后用padding-bottom将元素撑开，以实现固定宽高比。
二、rem
使用场景：对于图片等对高度自适应有要求的场景
rem单位：以页面根字体的大小，也就是html元素字体的大小为基准，例如
`html{``font-size``:``16px``;``}`那么1rem等于16px。
所以使用时，我们只需让根字体大小随屏幕大小自适应，那页面中所有使用rem单位来设置宽高的元素，大小也会随屏幕大小自适应了。
根据不同屏幕大小设置根字体大小有两种方法：
1、css方法设置rem
利用媒体查询，根据不同的屏幕大小进行设置，缺点就是一般只列举少量代表性的屏幕大小，自适应不能充分覆盖所有范围
`html{``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``}``}`欢迎加入全栈开发交流划水交流圈：582735936面向划水1-3年前台人员帮助突破划水瓶颈，提升思维能力2、JS方法设置rem
利用JS设置根字体大小，所以若改变发生在渲染完成之后，则会引起回流，导致闪屏现象。因而使用这种方法时，应将JS代码放入head头部中并且在CSS引入之前。
`(``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内核时也容易踩坑 。
以上就是本文的一律内容，希望对大家的学习有所帮助