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; }

 

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

html{ font-size:40px; }

 

上面的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中咱们知道改变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是能够实现全适配。具体用哪一个就要根据本身的实际工做场景去定了。