移动端适配方案的优缺点比较

当我们说到适配方案的时候越来越多的人会潜意识的翻译成移动端适配方案。确实是这样，在移动端蓬勃发展的今天，移动端的适配显得尤为重要。PC应用的适配已经不是适配方案主要需要考虑的了，随着移动互联网的来临，追求移动端的完美展示才是王道。
最近也在做一些活动页面的开发，对于网上的一些适配方案调研了一下，大致有百分比、媒体查询@media、rem等三种主流方案。下面对这几种方法做一些简单的整理，作为菜鸟肯定有很多的错误，希望大家指正，祝我早日走向人生巅峰。

百分比适配

百分比适配应该是最久远、最容易想到的一种适配方案。按照视觉的设计稿，根据展示元素的大小和位置进行百分比的换算，比如：视觉搞的宽度是720px，图片的宽度是360px，那么在设置图片的时候就需要将width设为50%。
对于这种百分比的适配你一定会说，在不同的分辨率下图片会出现拉伸变形，影响用户体验。没有错，确实会这样，所以就需要我们在展示图片的时候尽可能不使用，而是使用div的background-image来实现图片，并且设置相关的属性：background-size、background-position和background-repeat来实现图片，这里不是今天要总结的重点，所以就不细说了。通过一系列的属性设置之后，你会发现在图片并不会随着分辨率的不同而变形。

但是你会发现图片的高度会根据div的高度收到显示，当屏幕高度很小的时候会出现很多空余空间。就像这样，

这就是使用百分比是的问题，百分比适配的方案在对页面展示环境没有约束的情况下比较实用，比如你的页面可能在浏览器打开，也可能在产品内打开，或者以闪屏的形式展现，这时候使用百分比，你就不用再考虑页面能否一屏幕完全显示的问题了。

媒体查询media

media无疑是目前使用最多的适配方案，最为响应式布局的扛把子，媒体查询有着其独特的魅力。简洁易懂的css语句，使得移动端适配有了新的方向。我们再也不用去考虑百分比了，也不用担心页面元素会拉伸变形了。
媒体查询的适配思路简单的来说就是在某一段区域内以一个特定的尺寸显示元素。就像是一块地盘内只有一个老大，大家出来混的当然都听他的。使用media来指定适配的媒体介质，使用screen较多，但你会发现其实如果你的页面不需要对打印方式有过多考虑时省略screen完全没问题，使用@media screen和min、max的结合使用来实现响应式布局。比如下面代码：
body{background:#000000;}
@media screen and (max-width:480px){body{background:red;}}/宽度小于480px时 绿色/
@media screen and (min-width:980px){body{background:yellow;}}/宽度大于980px时 红色/

这里默认的背景是黑色，当屏幕小于480px的时候页面会变成绿色的，当屏幕大于980px的时候页面会变成红色。效果我就不上图了，很简单的例子。这样就完成了一页简单的响应式媒体查询的页面，大致的思路就是这样了。
使用媒体查询在css中会需要增加很多的不同分辨率的样式代码，可能会觉得有很多冗余，但是毫无疑问，媒体查询离我们理想中的适配方案已经很近了。那么还有什么更优秀的方法吗？

后起新秀rem

把rem说成后起之秀还是有点不恰当的，如果你在网上查一下就可以发现rem代表的意思是根元素字体大小，而且你会发现原来各大主流浏览器早就规定好了默认的font-size是16px，也就是说你不用在担心使用rem的过程中会出现浏览器版本兼容性的问题了，是不是很开心？
rem的使用其实也可以看成百分比的一种衍生。当你使用rem是，你会发现根据根元素的font-size的不同，页面的rem显示的尺寸也是不同的。网上有很多关于rem尺寸的问题，水平有限，就不把大家往坑里带了，自己看大神的讲解吧。首先我们需要在html中设置根字体大小，
html{

font-size:62.5%;

}

这样就把默认的根字体大小设为10px了，62.5%=10/16*100%。在设置好默认字体大小之后，我们就可以使用rem来设定元素属性了。比如
.test{top:5rem;}
到这你会发现rem也很麻烦啊，有这功夫我直接用百分比了。没有错，这样确实是很麻烦的，知道我找到了一个hotcss，使用hotcss后就再也不用担心这个问题了，我们完全就按照视觉给的尺寸设定就可以了。
就个人来讲还是比较喜欢rem来进行适配的，但是在使用@keyframes实现动画效果的时候，有个问题把我坑惨了。在页面加载并立刻执行动画的时候你会发现图片会有一个从小变大的过程，虽然动画效果还是有的，但是我们并不希望图片有这样一个变化的过程。那么这是为什么呢？仔细观察后我发现页面出现图片的这种变化是因为浏览器会把rem转成相应的px，然后再加载（仅是个人理解，网上没有找到相关的说法）。当页面从css文件中读取相应的属性时，会有一个转换的过程，虽然这个过程很短，但是如果你的动画在页面进入时就加载动画还是能够看到这个过程的。我的笨方法就是给浏览器一点解析时间，或者动画延迟一点时间。

viewport

通过对mata中viewport的scale设置，也可以实现适配，这个适配方案是我无意中找到的，页面地址由于没有保存丢失了，很可惜。其实，我也只是做了一个简单的demo，有兴趣的可以看一下。这种方法说白了就是把你的设计稿和手机屏幕分辨率做一个比例缩放，连文字大小也会根据比例缩放。

简单的总结了一下自己所了解的适配方案，水平有限，有错误的地方希望大家多多指教了。