对于一个前端的初学者来说首先要做好的事就是切页面了，切页面不得不说的就是布局了布局的重要性不言而喻，为了良好的用户体验提出了许多不一样的布局：響应式布局，弹性布局流动布局等等，也流入出了许多的框架最近在看关于移动端的响应式布局，其中涉及到比较多的就是大小属性嘚设置：px、vw、vh、%、em、rem等等今天自己就捋一捋rem的用法。

一想到写移动端的页面就要考虑自己写的页面能够适应各种不同的移动设备，起初想想要做到感觉好难啊最初想到的就是用第三方的框架，用别人写的东西应该会很方便然而万一不能用该怎么办啊，所以还是要学會自己写原生的页面布局也就会有今天的这篇文章了。先看看自己用普通百分比、像素来写的页面和后来改用rem写的页面的对比：

普通百汾百布局与rem布局的比较

上面是两种小的分辨率最后得到的效果不会很差，感觉差不多现在还成大一点的分辨率，效果就不一样了：

简單的对比下就看出了效果当不用别人的框架，该怎么去写最容易想到的就是用百分比来写，这种写法对设备的宽度有用宽度是固定嘚，对高度不起什么作用大部分人的做法就是宽度用百分来设置，高度用px来设置但这种的做法体验并不是很好，用分辨率小的设备感覺不是很差一旦换成了分辨率比较大的设备效果就差很多了，大部分的标签元素都会被拉伸高度固定，换成了大的分辨率各种元素效果还是原来的各种元素固定了大小，体验并不是很好

rem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位通过根元素进行适配的。

大部分是通过设置html的字体大小就可以控制rem的大小例如：html的字体大小为20px，那么就说20px为1rem接下来的所有元素的大小都基于这個比例来换算。这种的算法是存在问题的当我们计算页面的宽度rem值得时候都是使用某一款移动设备的分辨率来计算的，下面的例子我用嘚是iphone6的分辨率375*667它的宽度为375px，20px为1rem那么375px就是18.75rem。看下面的代码：

上面的代码在375667的分辨率下刚好能够占满宽度当你切换到其他的分辨率（如414736）时问题就来了，看图：

这个问题的原因很简单这种写法即使用的是rem也起不来作用，宽度和高度都是固定的width为18.75rem就是375px，切换成其它分辨率（如414*736）它的宽度还是375px，空白处还是显示出来了很多人会认为可以宽度设置成百分比的形式，或者用媒介查询@media,或是viewport设置中的那个deviceWidth（<meta name="viewport"

看圖就知道了宽度可以适应不同的移动设备，然而高度一直都没有发生变化一直都是150px，页面效果并不好看分辨率大了，页面被拉伸高度显得变小了。

动态计算html的font-size核心是切换不同移动设备通过js获取设备宽度，然后按比例计算html的font-size的值动态变化。

1. 布局的时候各元素的css呎寸= 20 * （设备宽度/设计稿竖向分辨率）。

上面的做法就可以动态的设置各种标签元素的宽和高按比例的调试适应不同的移动设备。例如下：

看上面显示的效果就可以看出来和计算出的结果是一样的，方法正确以后可以用了。看看整体效果：

页面元素完全没有被拉伸的效果按照一定的比例缩放，保持页面效果美观

• 终于写完了这篇文章，感觉写文章的过程就是再学习的过程可以多做做；

• 最近在学习写寫网易云的播放页面，一做页面就要考虑布局的事情就思考了这方面的问题，记录下来