前端响应式布局基础——rem

免责说明

本文内容浅薄，不喜勿喷

什么是rem?

rem是根元素字体的单位，好比 html{font-size:16px;} ，1rem至关于16px。

不单单能够给字体用，其余px单位的均可以用，好比设padding:2rem ，至关于32px。

响应式布局的准则

响应式布局的要求（摘自知乎 Z Yuhan）：

1 . 内容区块可伸缩：内容区块的在必定程度上可以自动调整，以确保填满整个页面

2 . 内容区块可自由排布：当页面尺寸变更较大时，可以减小/增长排布的列数

3 .边距适应：到页面尺寸发生更大变化时，区块的边距也应该变化

4 .图片适应：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用

5 .内容可以自动隐藏/部分显示：如在电脑上显示的的大段描述文本，在手机上就只能少许显示或所有隐藏

6 .导航和菜单能自动折叠：展开仍是收起，应该根据页面尺寸来判断

7 .字体比例缩放时，字体也保持缩放

rem有什么用

放弃px单位，使用rem做为单位，这样在不一样尺寸的设备上，经过修改根节点的font-size大小，实现等比例缩放

假设设备宽度为600px，页面只有2个在一行的div，使用rem宽度以下设置

html{
    font-size:10px;
}
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}
复制代码

如今换到宽度为400px的设备上，保持比例相同，只有改变font-size便可

//在js计算字体大小，x为缩小比例
400/600=x/10
x=6.6
复制代码

html{
    font-size:6.6px;/*实际上使用js动态改变，也能够配置媒体查询*/
}
/*如下保持不变*/
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}
复制代码

为何不用百分比呢？岂不是很简单

百分比是相对于父元素计算的，使用不方便，并且rem多了个字体变化。

如何使用

1 . 给根元素设置字体大小，并在body元素校订

html{font-size:100px;}
body{font-size:14px;}
复制代码

如上设置后，使用rem代替px，直接除100便可

.menu li{
	display: table-cell;
	padding: .1rem .3rem;/*至关于10px 30px*/
}
复制代码

2 . 绑定监听事件，dom加载后和尺寸变化时改变font-size

注意把代码中的 1536 修改成实际开发时页面的宽度

//改变font-size
(function(doc,win){
    var docEI = doc.documentElement,
    resizeEvt = 'orientationchange' in window?'orientataionchange':'resize',
    recalc = function(){
        var clientWidth = docEI.clientWidth;
        if(!clientWidth) return;
        //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
        docEI.style.fontSize = 100*(clientWidth/1536)+'px';
    }

    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document,window);
复制代码

自动转换成rem

参见 postcss，待后续。。。

A & Q

• 为何不设置 font-size:62.5% ？

  由于谷歌有些版本不支持10px大小的字体

• 为何不使用 em ？

  同百分比同样，相对于父元素计算不方便

• 为何不使用 viewport 等比缩放？

  viewport的作法：

  <meta name=" viewport " content=" width=320, maximum-scale=1.3, user-scalable=no ">

  这种作法是将屏幕等比缩放，缩放过大时会失真

• 使用rem web就是响应式的了吗？

  不是，rem只是等比缩放，只解决了响应式布局的准则 的部分问题 ，还须要配合媒体查询