移动端前端开发不可不知的——rem

在面对丰富尺寸的移动端时，Iphone、安卓各类屏幕分辨率，智能手机品牌、机型如此众多的今天，各类不规则的分辨率，即便做为专业团队的咱们切版网，也很难寻找到全部的真机一一去测试。

不管我怎么去调试，都会有比例上的不同的问题。这就会致使不能很好的还原设计。

解决办法固然是有的，那就是使用REM！

首先让咱们带您一块儿理解一下rem

rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优势于一身，经过它既能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁反应。

在iphone6上，咱们设置了20px=1rem，可是在iphone4上，一样的1rem，就不该该是20px，而是应该大约17px（为（320/375）*20）,这样才能够保证对应的1rem和原来的效果类似，不然，在iphone4就变得很大了。因此，在iphone4上咱们要修改html的font-size=17px，但是还有Iphone5，iphone6 plus,还有无数的安卓机型呢？！

下面给你们详细介绍一下这两种方法：

第一种是使用媒体查询控制不一样分辨率下的根原素大小。方法以下图，要根据项目的实际类型改变媒体查询的值。

第二种方法就是经过JavaScript动态获取屏幕的宽度，而后给HTML设置font-size的值。下面我给你们讲解一下这段JS代码。我主要以手机端为例。

将这作代码打包到一个defineRemSize.js的文件中，在页面里引用。在用下面这这个方法调用。

作完了这这些，咱们有了能够自适应的rem的值，接下来我就说一下在实际使用中的一些心得。

Rem不只能够用在字体大小单，包括容器宽度的值、高度的值、margin的值、padding的值均可以使用rem作为单位大小。实际上rem更像是聪明的百分比数值。若是页面全部远素的值都使用rem，整个面更像是一张图片。缩小时总体都会缩小，放大里总体都会放大。下面我给你们看一下我使用两种方法作的同一个页面的效果图。

能过对比，会发现，使用rem在不一样分辨率的设备上总体比例是不变的。而且没有使用任何媒体查询方法。可是使用px+%这种方法作出来的页面，在不一样的页面上的元素的间距会发生改变，图片会随首设备宽度的变化而变化，可是文字大小以及元素的间距并无发生变化。

由以上能够得出，在使用rem作为页面元素单位时，在适配时会更加简便，而且页面在不一样尺寸的终端设备上页面总体比例不会改变。不须要咱们再经过Media query 来适配不一样的分辨率。而且作出来的页面会更加的接近设计图。

h五、响应式切图，找切版网（ www.qieban.cn ），是国内较早专一网页切图服务的团体，由人均3年的前端开发者构成，坚持以高性价比的服务为宗旨，普通页平均80一页，拥有超过200多客户创建至今。超过1500多个项目。长期致力于致力于h五、响应式前端外包服务总体解决方案。