首先来说说现在比较流行的布局，一共有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！想必将来改进后肯定很受欢迎！
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery