CSS_相对单位rem

rem这是个低调的css单位，近一两年开始崭露头角，有许多同窗对rem的评价不一，有的在尝试使用，有的在使用过程当中遇到坑就弃用了。可是我对rem综合评价是用来作web app它绝对是最合适的人选之一。

rem是什么？

    rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem你们必定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很类似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

为何web app要使用rem？

    这里我特别强调web app，web page就不能使用rem吗，其实也固然能够，不过出于兼容性的考虑在web app下使用更加能突显这个单位的价值和能力，接下来咱们来看看目前一些企业的web app是怎么作屏幕适配的。

一、实现强大的屏幕适配布局：

    最近iphone6一下出了两款尺寸的手机，致使的移动端的屏幕种类更加的混乱，记得一两年前作web app有一种作法是以320宽度为标准去作适配，超过320的大小仍是以320的规格去展现，这种实现方式以淘宝web app为表明做，可是近期手机淘宝首页进行了改版，采用了rem这个单位，首页之内依旧是和之前同样各类混乱，有定死宽度的页面，也有那种流式布局的页面。

    咱们如今在切页面布局的使用经常使用的单位是px，这是一个绝对单位，web app的屏幕适配有不少中作法，例如：流式布局、限死宽度，还有就是经过响应式来作，可是这些方案都不是最佳的解决方法。

    例如流式布局的解决方案有很多弊端，它虽然可让各类屏幕都适配，可是显示的效果极其的很差，由于只有几个尺寸的手机可以完美的显示出视觉设计师和交互最想要的效果，可是目前行业里用流式布局切web app的公司仍是挺多的，看看下面我收集的一些案例：

1.亚马逊：

2.携程：

3.兰亭

    上面的网站都是采用的流式布局的技术实现的，他们在页面布局的时候都是经过百分比来定义宽度，可是高度大都是用px来固定住，因此在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，可是高度仍是和原来同样，实际显示很是的不协调，这就是流式布局的最致命的缺点，每每只有几个尺寸的手机下看到的效果是使人满意的，其实不少视觉设计师应该没法接受这种效果，由于他们的设计图在大屏幕手机下看到的效果至关因而被横向拉长来同样。

    流式布局并非最理想的实现方式，经过大量的百分比布局，会常常出现许多兼容性的问题，还有就是对设计有不少的限制，由于他们在设计之初就须要考虑流式布局对元素形成的影响，只能设计横向拉伸的元素布局，设计的时候存在不少局限性。

2.固定宽度作法

    还有一种是固定页面宽度的作法，早期有些网站把页面设置成320的宽度，超出部分留白，这样作视觉，前端都挺开心，视觉在也不用被流式布局限制本身的设计灵感了，前端也不用在搞坑爹的流式布局。可是这种解决方案也是存在一些问题，例如在大屏幕手机下两边是留白的，还有一个就是大屏幕手机下看起来页面会特别小，操做的按钮也很小，手机淘宝首页起初是这么作的，但近期改版了，采用了rem。

3.响应式作法

    响应式这种方式在国内不多有大型企业的复杂性的网站在移动端用这种方法去作，主要缘由是工做大，维护性难，因此通常都是中小型的门户或者博客类站点会采用响应式的方法从web page到web app直接一步到位，由于这样反而能够节约成本，不用再专门为本身的网站作一个web app的版本。

4.设置viewport进行缩放

天猫的web app的首页就是采用这种方式去作的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就能够兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。说实话我以为他和用接下去咱们要讲的rem都很是高效，不过有部分同窗使用过程当中反应缩放会致使有些页面元素会糊的状况。

rem能等比例适配全部屏幕

    上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案，接下来说下rem是如何工做的。

    上面说过rem是经过根元素进行适配的，网页中的根元素指的是html咱们经过设置html的字体大小就能够控制rem的大小。举个例子：

html{     font-size:20px; } .btn {     width: 6rem;     height: 3rem;     line-height: 3rem;     font-size: 1.2rem;     display: inline-block;     background: #06c;     color: #fff;     border-radius: .5rem;     text-decoration: none;     text-align: center;     }

Demo 上面代码结果按钮大小以下图：

我把html设置成10px是为了方便咱们计算，为何6rem等于60px。若是这个时候咱们的.btn的样式不变，咱们再改变html的font-size的值，看看按钮发生上面变化:

html{     font-size:40px; }

Demo

按钮大小结果以下：

     上面的width，height变成了上面结果的两倍，咱们只改变了html的font-size，但.btn样式的width,height的rem设置的属性不变的状况下就改变了按钮在web中的大小。

其实从上面两个案例中咱们就能够计算出1px多少rem:

第一个例子：

120px = 6rem * 20px(根元素设置大值)

第二个例子：

240px = 6rem * 40px(根元素设置大值)

推算出：

10px  = 1rem 在根元素（font-size = 10px的时候）；

20px  = 1rem 在根元素（font-size = 20px的时候）；

40px  = 1rem 在根元素（font-size = 40px的时候）；

    在上面两个例子中咱们发现第一个案例按钮是等比例放大到第二个按钮，html font-size的改变就会致使按钮的大小发生改变，咱们并不须要改变先前给按钮设置的宽度和高度，其实这就是咱们最想看到的，为何这么说？接下来咱们再来看一个例子：

Demo

    由上面两个的demo中咱们知道改变html的font-size能够等比改变全部用了rem单位的元素，因此你们能够经过chrome浏览器的调试工具去切换第三个的demo在不一样设备下的展现效果，或者经过缩放浏览器的宽度来查看效果，咱们能够看到无论在任何分辨率下，页面的排版都是按照等比例进行切换，而且布局没有乱。我只是经过一段js根据浏览器当前的分辨率改变font-size的值，就简单的实现了上面的效果，页面的全部元素都不须要进行任何改变。

    到这里确定有不少人会问我是怎么计算出不一样分辨率下font-size的值？

    首先假设我上面的页面设计稿给我时候是按照640的标准尺寸给个人前提下，（固然这个尺寸确定不必定是640，能够是320，或者480，又或是375）来看一组表格。

    上面的表格蓝色一列是Demo3中页面的尺寸，页面是以640的宽度去切的，怎么计算不一样宽度下font-site的值，你们看表格上面的数值变化应该能明白。举个例子：384/640 = 0.6，384是640的0.6倍，因此384页面宽度下的font-size也等于它的0.6倍，这时384的font-size就等于12px。在不一样设备的宽度计算方式以此类推。

    Demo3中我是经过JS去动态计算根元素的font-size，这样的好处是全部设备分辨率都能兼容适配，淘宝首页目前就是用的JS计算。但其实不用JS咱们也能够作适配，通常咱们在作web app都会先统计本身网站有哪些主流的屏幕设备，而后去针对那些设备去作media query设置也能够实现适配，例以下面这样：

html {     font-size : 20px; } @media only screen and (min-width: 401px){     html {         font-size: 25px !important;     } } @media only screen and (min-width: 428px){     html {         font-size: 26.75px !important;     } } @media only screen and (min-width: 481px){     html {         font-size: 30px !important;      } } @media only screen and (min-width: 569px){     html {         font-size: 35px !important;      } } @media only screen and (min-width: 641px){     html {         font-size: 40px !important;      } }

    上面的作的设置固然是不能全部设备全适配，可是用JS是能够实现全适配。具体用哪一个就要根据本身的实际工做场景去定了。

    下面推荐两个国内用了rem技术的移动站，你们能够上去参考看看他们的作法，手机淘宝目前只有首页用了rem，淘宝native app的首页是内嵌的web app首页。

淘宝首页：m.taobao.com

D X：m.dx.com

最后咱们再来看一看他的兼容性：

感谢你的阅读，本文由 腾讯ISUX 版权全部，转载时请注明出处，违者必究，谢谢你的合做。
注明出处格式：腾讯ISUX (https://isux.tencent.com/web-app-rem.html)