rem : web app适配的秘密武器

栏目分类：DIV+CSS教程   发布日期：2017-01-10   来源：   浏览次数：次

于是问题来了，rem到底是什么？rem是为了解决什么问题而存在的？rem能够给我们带来什么样的便利？带着这样的问题，我去学习了很多rem的文章，然后刚好工作中有一个移动端页面的需求要做，就尝试使用rem完成了一个小小的页面适配。大家可以点击这里，查看rem适配demo，

建议大家在chrome的device module下打开，通过切换不同手机的模拟器来查看不同尺寸下的区别。

rem是什么？

rem是一个相对于根元素字体大小的css单位。与px一样，他可以用来设置字体大小，也可以用来设置长度单位。相对于根元素字体大小是什么意思？

举个栗子。在页面中，html元素是根元素，因此我们首先给html设置一个字体大小

html { font-size: 100px; }

于是，在整个页面中，就有这样的换算公式 ： 1rem = 100px

所以如果一个按钮，有如下的css样式，就等同于他的宽为100px，高50px.

btn { width: 1rem; height: 0.5rem; }

好像这就是rem所有的真相了。 ！！！什么？这就完了？这和px有什么区别？对啊，这和px本来就没有特别的区别，不就是一个度量单位嘛！所以提问的那个同学拿着750x1500设计图来问，150x50的按钮应该在页面里面写什么尺寸，用px就应该写 75x25，用rem就是 0.75 x 0.25.

可是很显然，rem还有一点点别的特性。

rem是为了解决什么问题而存在的？

以iphone各种手机的尺寸来说，iPhone4,5 宽度320px，iPhone6 375px，iPhone6 plus 414px. 如果一个按钮，固定一个75x25的尺寸，那么就必然会导致在不同尺寸下的相对大小不一样。这带来的问题就在于会直接影响到设计的美观，可能在iPhone6下，一个完美的设计图，到了iPhone5,就变得low很多。 因为，为了让页面元素的尺寸能够在设备宽度变化的时候也跟着变化，rem就出现了。

我们已经知道，rem的相对大小跟html元素的字体大小有关系。使用rem适配的原理就是我们只需要在设备宽度大小变化的时候，调整html的字体大小，那么页面上所有使用rem单位的元素都会相应的变化。 这也是rem与px最大的区别。

有css与js两种方式来调整html元素大小的值。

css方式

html { font-size: calc(100vw / 3.75) }

100vw表示设备宽度，除以3.75这里是以iphone6 的宽度375px为标准，为了保证html的字体大小为100px。这样我们在换算的时候，1px 就是0.01rem，就很容易计算。

因为chrome下最小字体大小为12px，所以不能把html的font-size设置成1px或者10px，100px是我们最好的选择。

js方式， 原理与css一样，不过为了避免在一些老旧一点的手机浏览器上不支持calc，vm这些属性，在实际应用中使用js是最好的。

document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
$(window).on('resize', function() {
   document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})

##### 需要注意的地方

一、rem的适用性很有局限，仅仅只能够用于只在移动端展示的页面。如果你的页面还需要适配到pc端，那么就老老实实的使用px吧。

二、自己只是用来放在移动端的页面，别人却在pc上打开了，因此可以设置一个html的最大宽度与最小宽度。580px就是手机上浏览器的最大宽度。

html {
   max-width: 580px;
   min-height: 320px;
}

三、有的同学可能对web的适配有点误解。web中做适配并不需要考虑什么物理像素啊，dpi等等概念。这些应该仅仅只是Android或者ios原生app才会考虑的问题。这些误会导致许多搞设计的同学在给web app做设计的时候，也丢一张1080 x 1920 的设计稿过来，真是愁死人了。

那么回到这个问题中来，设计稿是750x1500的应该怎么办？其实这个还好，750刚好就是375的2倍，iPhone6的宽度。因此量出来的尺寸直接除以2就行了。如果是1080x1920等很大很大的尺寸呢？1.首先保存整张设计稿.jpg 2.新建一个psd，宽度375px，高度1000px(高度可以高一点，无所谓) 3.将保存的设计稿.jpg丢进去。这样量出来的页面元素的尺寸，就是你需要的尺寸。

ps：最好的方法，就是让设计师用sketch出设计稿。