初学者如何写移动端响应式布局

该篇文章首发于我的个人博客：http://cherryblog.site/ 使用github+coding+hexo搭建的静态博客，更多文章请移步至我的个人博客

一、百分比布局

刚入前端坑的时候就是使用百分比布局，觉得百分比布局可以解决移动端的响应式布局问题，但是图样图森破，最常见的情况莫过于设计师说：“你没有按照我的设计稿来做呀”然后就是设计师在我旁边，我们一起开始调整位置….

之后我学会了，基本上都是按照设计稿的位置来的（将设计稿缩放成chrom响应式中那么大，然后两个重叠开始比对位置= =），然后设计师再也没有说过位置不对了…但是身为一个程序员，这样做好丢人呀，设计师说这里再大一点小一点的时候我都直接说，你给我修改好的设计稿！

使用百分比布局还会出现一个问题，就是当某些需要高度固定的部分会因为使用百分比然后不同分辨率会有误差。

很明显，百分比布局还原设计稿能力还是有限。

二、固定的设备宽度

在做移动开发的时候很多人都会加上viewport的配置，
那么固定设备宽度的布局就是根据这个来设置的，将viewport里面的宽度width设置成设计稿的宽度，也就是说原本是width=device-width，即宽度为设备的宽度，假如在iphone6上显示的时候，那么页面的宽度就是375px; 当我们将width设置成设计稿的宽度的，假如设计稿是750px，而我们的css也按设计的尺寸来做，例如一个图片是200px*200px，那么在css上也是宽高都是写200px,也就是1：1的比例。那么在375px的手机上显示的时候，就会缩小2倍显示，以此类推，在320px的宽度的时候，就会缩小2.3倍显示，在414px的宽度的时候就会缩小1.8倍。
这样的写法是会比较好的还原设计稿，而且速度也会比较快，但是这样也有缺点，在缩>小的时候有些设备会比较模糊，因为你强行将设备放大了。

三、rem布局

基础知识参考以下两篇博客：

http://isux.tencent.com/web-a…

http://www.w3cplus.com/css3/d…
使用rem布局结合在html上根据不同分辨率设置不同font-size有很多不好解决的麻烦。
页面上html的font-size不是预先通过媒介查询在css里定义好的，而是通过js计算出来的，所以当分辨率发生变化时，html的font-size就会变，不过这得在你调整分辨率后，刷新页面才能看得到效果。你看代码就知道为啥font-size是直接写到html的style上面的了

它是根据什么计算的，这就跟设计稿有关了，拿网易来说，它的设计稿应该是基于iphone4或者iphone5来的，所以它的设计稿竖直放时的横向分辨率为640px，为了计算方便，取一个100px的font-size为参照，那么body元素的宽度就可以设置为width: 6.4rem，于是html的font-size=deviceWidth / 6.4。这个deviceWidth就是viewport设置中的那个deviceWidth。

视口做如下设置：

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">

1 用js根据屏幕分辨率动态生成fontsize：

(function () {
   document.addEventListener('DOMContentLoaded', function () {
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 10 + 'px';
   }, false);
window.onresize = function(){
var deviceWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = deviceWidth / 70 + 'px';
};
})();

2、利用sass设置px和rem互相转化的函数

@function px2rem($x) {
  @return $x / 108 * 1rem; //按1080的设计稿，统一宽度10rem;
}

3、在我们设置长度的时候就可以直接用设计稿上标注的长度了

#translateBtn{
  @include base-style(px2rem(53), px2rem(919), px2rem(94))
}