首先来说说现在比较流行的布局，一共有4种：

 

　　百分比布局

 

　　flex布局

 

　　rem布局

 

　　viewport

 

　　先来讲讲这四个布局吧

 

　　百分比布局

 

　　首先来说说百分比布局，在我本人使用的时候，就感觉有个致命的缺点：%是参考父级的

 

　　效果：

 

　　如图，这三个盒子都是设置成了50%的宽高，相互嵌套，每个盒子都参考上一个盒子的大小来。这会导致一个问题：如果你想用百分比设置某一部分的宽高，那么你 需要保证其父级、父级的父级……即祖先元素都要有百分比。 这显然是不明智的。

 

　　不过，在某些情况下，百分比还是挺好用的，比如京东移动端就用到了百分比布局。

 

　　rem布局

 

　　我个人比较喜欢flex布局和rem布局，flex布局应该就不用多说了，在PC端都是很常使用的，今天还是主要说说rem布局。

 

　　rem，第一个r的意思是root，用过rem的朋友都知道rem是相对于根元素html而言的，

 

　　1rem = 1 × html.style.fontSize

 

　　是的，你会发现，如果你想改变1rem的大小，你可以修改根元素的字体大小即可。

 

　　rem布局的优点也就体现在这里了，rem的参考只有一个，它不像%那样参考父级，rem直接参考根元素。另外，它的比例能够按需修改，比如 苏宁移动端，它就是用了rem布局来实现的。

 

　　可是，将font-size设置死也不是解决办法呀，这里我们用到了flexible，flexiblejs是淘宝做出的用于解决移动端适配问题的js框架。

 

　　flexiblejs可以到github上查看：github_flexible.js_淘宝

 

　　原理也很简单

 

　　就是获取你的设备的像素，然后等分成若干份，让1rem=1份就行了。

 

　　比如说你的设备是750px的，分成10份，就是每份75px，那么我们将 html { font-size: 75px } 这样就实现了1rem = 75px，也就是说 10rem 就能占满你的屏幕了。

 

　　我这里也实现了一个简易版的flexiblejs，我叫它为resizeablejs

 

　　这样，在你改变视图的时候，1rem的值也会跟着改变，从而改变对应的大小，这能让你的页面跟设计图保持高度一致。

 

　　viewport

 

　　viewport这里也不说了，1vw≠1vh，不是特别好用，但是vw vh的优点就是基于viewport！想必将来改进后肯定很受欢迎！