不同尺寸的屏幕适配你必须知道rem

最近公司的几个开发项目一直都是移动端项目，接过资深前端写的静态页面，阅读css时，rem抢走我的全部注意力。rem什么鬼？赶紧查资料弥补下。

什么是rem

rem：是计算机字体度量单位，英文font size of the root element。指相对于根元素（html）字体大小单位。网页布局中还又两个从常见的单位：px，em。px这个是绝对单位，em也是一个相对单位，它和rem区别是它相对于父级元素的大小。

rem和em都是已倍数方式存在的，怎么理解？比如font-size:2rem指这个元素的字体大小相对应根元素的字体大小是两倍关系，如果我在html定义了font-size：14px，那么这个元素的大小就是25px。

html{
        font-size:14px;
    }
h1{
        font-size:2rem;/**实际大小为28em**/
    }

再举一个最常见的应用就是文章的首行缩进,用em我可以不用关心你这文章用多大的字体，在任何字体下都可以应用一下代码。

p{
    text-indent:2em;
}

rem有哪些优势

上述例子已经彰显了相对单位的优势，但rem的价值可不在这局部的元素上的应用，各个不同尺寸的屏幕上适配这才是其英雄用武的地方。先看一下它的具体引用。

针对rem，通用的媒体查询css代码段：

/*媒体查询*/
html{font-size:11px}
@media screen and (min-width:321px) and (max-width:374px){html{font-size:11px}}
@media screen and (min-width:375px) and (max-width:413px){html{font-size:12px}}
@media screen and (min-width:414px) and (max-width:639px){html{font-size:13px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px){html{font-size:20px;}body {background-color:#eee;}}

等等~，以上代码怎么没有rem！不要急，以上是rem适配不同屏幕的前提，剩下涉及到元素大小，长度，宽度等都用rem定义。注意： 所有屏幕的适配情况只要控制上述这几行代码就可以了 。

回归到rem优势分析上，对比分析px和em两个单位。px，做一两个大小的屏幕适配还可以，如果移动设备尺寸一多那代码就难以维护了，单靠css做适配，px是行不通的。那em呢？这个貌似可以，但很危险，em随时会叛变，一个稍微大一点的页面其层级关系可复杂了，子元素离根元素html越远越不受控制，有种将在外君命有所不受之意。用em做统筹页面，那自能自讨苦吃。

rem集合了相对和绝对单位的优点。我个人理解这是一个 “可以改变的绝对单位” 或者 “可控制的相对单位” ，绝对单位的一个好处就是可控，忠诚，说一不二；相对单位灵活单不可控。其实从某种角度看px也是相对度量单位，其相对于计算机的分辨率大小，在web开发中中这个计算机分辨率我们无法改变的，所以它就成了web中的绝对单位。rem的相对参照物可以改变的，并且控制的只要我在html定义font-size的大小，那么下面的每一个元素的大小，都是可以确定的，每一个元素的大小都在开发者心中都是可控的。而em就无法做的可控，这也就是为什么em只能做局部元素的应用而不能统筹页面的原因所在。

最后：

不同尺寸的屏幕适配还有很多解决方案，并不一定要用rem。比如说流式布局，通过%定义宽度，也又很多web app采用这种布局，像亚马逊，携程等。但rem在开发效率和维护性上都占居一定的优势，各个尺寸下展现的页面也更贴合设计师的最初设计，有这两者其实足已！