你不知道的css各种布局（五）之em布局、rem布局

时间 2019-11-20

标签不知道 css 各种布局 rem 栏目 CSS 繁體版

原文原文链接

em布局/rem布局

在了解弹性布局前咱们须要先知道em和remcss

rem：font size of the root element，rem是相对于根元素<html>来设置字体大小的，这就意味着，咱们只须要根据本身的需求在根元素肯定一个参考值。html

em：以使用em为单位的元素自己的font-size大小为参考点，标准不统一，容易形成混乱chrome

浏览器的默认字体高度通常为16px，即1em:16px，可是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者经常将页面跟节点字体设为62.5%，好比选择用rem控制字体时，先须要设置根节点html的字体大小，由于浏览器浏览器

默认字体大小16px*62.5%=10px。这样1rem即是10px，方便了计算。布局

由于有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。若是咱们将其设置为10px，必定会影响在这些浏览器上的效果，因此最好用绝大多数用户默认的16做为基数 * 62.5% post

获得咱们须要的10px。字体

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

实际项目设置成 font-size: 62.5%可能会出现问题，由于chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，致使chrome的em/rem计算不许确。url

针对这个现象，能够尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。spa

弹性布局是指经过调整其内元素的宽高（弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出），从而在任何显示设备上实现对可用显示空间最佳填充的能力设计

这类布局的特色是，包裹文字的各元素的尺寸采用em/rem作单位，使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时能够支持浏览器的字体大小调整和缩放等的正常显示，由于em是相对父级元素的缘由没有获得推广，

使用rem单位的弹性布局在移动端也很受欢迎

其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的缘由归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，能够实现完美的流式

布局（高度和文字大小均可以变得“流式”），弹性布局就再也不必要了。

这种rem+js只不过是宽度自适应，高度没有作到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。若是只是宽度自适应，更推荐响应式设计。

1.若是只作pc端，那么静态布局（定宽度）是最好的选择；

2.若是作移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；

3.若是pc，移动要兼容，并且要求很高那么响应式布局仍是最好的选择，前提是设计根据不一样的高宽作不一样的设计，响应式根据媒体查询作不一样的布局。