Rem布局的原理解析

Rem布局的原理解析

tobAlier关注

22017.10.25 11:27:32字数 2,630阅读 12,367

什么是Rem

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下em:

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

em可以让我们的页面更灵活，更健壮，比起到处写死的px值，em似乎更有张力，改动父元素的字体大小，子元素会等比例变化，这一变化似乎预示了无限可能,有些人提出用em来做弹性布局页面，但其复杂的计算让人诟病，甚至有人专门做了个px和em的计算器，不同节点像素值对应的em值，o(╯□╰)o

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html{font-size:2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p{font-size:2rem}

Rem布局原理
rem布局的本质是什么？这是我问过很多人的一个问题，但得到的回答都差强人意。
其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊
假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比

p{width:50x}/* 屏幕宽度的50% */ 

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/
html{font-size:2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */
p{font-size:2rem}

如果让html元素字体的大小，恒等于屏幕宽度的1/100，那1rem和1x就等价了

html{fons-size:width/100}
p{width:50rem}
/* 50rem = 50x = 屏幕宽度的50% */

如何让html字体大小一直等于屏幕宽度的百分之一呢？ 可以通过js来设置，一般需要在页面dom ready、resize和屏幕旋转中设置

document.documentElement.style.fontSize=document.documentElement.clientWidth/100+'px'; 

下面的表格是通过我们的元素在不同屏幕宽度下的计算值

$ue-width:640;/* ue图的宽度 */ @functionpx2rem($px){@return#{$px/$ue-width*100}rem;} p{width:px2rem(100);} 

上面的代码编译完的结果如下

p{width:15.625rem} 

其实有了postcss后，这个过程应该放到postcss中，源代码如下

p{width:100px2rem} 

postcss会对px2rem这个单位进行处理，处理后的结果如下，感兴趣的话来写一个px2rem的postcss插件吧

p{width:15.625rem} 

/* rem方案 */
html{fons-size:width/100}
p{width:15.625rem}
/* vw方案 */
p{width:15.625vw}
vw还可以和rem方案结合，这样计算html字体大小就不需要用js了
html{fons-size:1vw}
/* 1vw = width / 100 */
p{width:15.625rem}

虽然vw各种优点，但是vw也有缺点，首先vw的兼容性不如rem好，使用之前要看下

另外，在使用弹性布局时，一般会限制最大宽度，比如在pc端查看我们的页面，此时vw就无法力不从心了，因为除了width有max-width，其他单位都没有，而rem可以通过控制html根元素的font-size最大值，而轻松解决这个问题

Rem不是银弹
rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询

用户选择大屏幕有两个几个出发点，有些人想要更大的字体，更大的图片，比如老花眼的我；有些人想要更多的内容，并不想要更大的图标；有些人想要个镜子。。。——颜海镜

html{fons-size:width/100}
body{font-size:16px}

那字体的大小如何实现响应式呢？可以通过修改body字体的大小来实现，同时所有设置字体大小的地方都是用em单位，对就是em，因为只有em才能实现，同步变化，我早就说过em就是为字体而生的’

@mediascreenand(min-width:320px){body{font-size:16px}} @mediascreenand(min-width:481px)and(max-width:640px){body{font-size:18px}} @mediascreenand(min-width:641px){body{font-size:20px}}p{font-size:1.2em}pa{font-size:1.2em} 

第二，如果用户在PC端浏览，页面过宽怎么办？一般我们都会设置一个最大宽度，大于这个宽度的话页面居中，两边留白

varclientWidth=document.documentElement.clientWidth; clientWidth=clientWidth<780clientWidth:780; document.documentElement.style.fontSize=clientWidth/100+'px'; 

设置body的宽度为100rem，并水平居中

body{margin:auto;width:100rem} 

@mediascreenand(min-width:320px){html{font-size:3.2px}}
@mediascreenand(min-width:481px)and(max-width:640px){html{font-size:4.8px}}
@mediascreenand(min-width:641px){html{font-size:6.4px}}

 
   
    
     
     
    

      宽度为屏幕宽度的50%，字体大小1.2em 
     

       字体大小1.2.em 
     
 
    
 
    

      宽度为屏幕宽度的40%，字体大小默认 
     

       字体大小1.2em 
     
 
    
 
    
  

html {
    font-size: 32px; /* 320/10 */
}
body {
    font-size: 16px; /* 修正字体大小 */
    /* 防止页面过宽 */
    margin: auto;
    padding: 0;
    width: 10rem;
    /* 防止页面过宽 */
    outline: 1px dashed green;
}

/* js被禁止的回退方案 */
@media screen and (min-width: 320px) {
    html {font-size: 32px}
    body {font-size: 16px;}
}
@media screen and (min-width: 481px) and (max-width:640px) {
    html {font-size: 48px}
    body {font-size: 18px;}
}
@media screen and (min-width: 641px) {
    html {font-size: 64px}
    body {font-size: 20px;}
}

noscript {
    display: block;
    border: 1px solid #d6e9c6;
    padding: 3px 5px;
    background: #dff0d8;
    color: #3c763d;
}
/* js被禁止的回退方案 */

.p1, .p2 {
    border: 1px solid red;
    margin: 10px 0;
}

.p1 {
    width: 5rem;
    height: 5rem;

    font-size: 1.2em; /* 字体使用em */
}

.s1 {
    font-size: 1.2em; /* 字体使用em */
}

.p2 {
    width: 4rem;
    height: 4rem;
}
.s2 {
    font-size: 1.2em /* 字体使用em */
}

js代码如下

var documentElement = document.documentElement; function callback() { var clientWidth = documentElement.clientWidth; // 屏幕宽度大于780，不在放大 clientWidth = clientWidth < 780 ? clientWidth : 780; documentElement.style.fontSize = clientWidth / 10 + 'px'; } document.addEventListener('DOMContentLoaded', callback); window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback); 

页面效果如下，完整的例子在这里