REM布局

2017-04-15 本文已影响3405人不二很纯洁

REM兼容性

首先，在介绍 rem 之前，我们先看看 em

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

通俗的讲就是： 1em，就是这个元素上的 font-size 的值，如果元素本身没有设置 font-size ，就按照他的父级的 font-size 计算（其实本身的font-size继承了父级的font-size），我们看看代码：

<style type="text/css">
    .box{font-size:20px; border:1px solid red; overflow:hidden;}
    .box>.con{width:10em; height:10em; background:#000; color:#fff;}
    .box>.con_1{float:left;}
    .box>.con_2{float:right; font-size:30px;}
</style>
<div class="box">
    <div class="con con_1">con1:我没有font-size</div>
    <div class="con con_2">con2:我有font-size</div>
</div>

em效果

在 con1 中，因为本身没有 font-size ，所以 10em=10(父级的font-size:20px)=200px* ，宽高为 200px 。
在 con2 中，因为本身有 font-size ，所以 10em=10(父级的font-size:30px)=300px* ，宽高为 300px 。

如果用em布局会存在一个问题，进行任何元素设置，都需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险

现在来看看rem

在W3C官网上是这样描述 rem 的—— “font size of the root element (根元素的字体大小)” ，

也就是说，rem 是相对于根元素<html>的，还是用上面的例子：

<style type="text/css">
    .box{font-size:20px; border:1px solid red; overflow:hidden;}
    .box>.con{width:10rem; height:10rem; background:#000; color:#fff;}
    .box>.con_1{float:left;}
    .box>.con_2{float:right; font-size:30px;}
</style>
<div class="box">
    <div class="con con_1">con1:我没有font-size</div>
    <div class="con con_2">con2:我有font-size</div>
</div>

rem效果

因为网页<html>的默认字体大小是 16px，所以 1rem=16px ，10rem=160px ，所以 con1 跟 con2 的宽高为 160px

如何适配各种设备屏幕

了解了 rem 的基本原理，我们来看看如何利用rem来完美适配各种设备屏幕。
理想的适配是把设计稿直接等比缩放在设备上，这样在任何不同的屏幕上布局都会很完美，手淘就是用的 rem 来进行适配的。

我现在讲的是利用我朋友朱伟友提供的解决方案 rem.js 来解决适配问题。

事实上 rem.js 是把屏幕等分成 20 份，每份为 1rem ， 1rem 对应的大小就是 rem基准值 ，rem.js 做的就是把 rem基准值 给<html>的 font-size ，所以如果设备的 物理像素 宽为 640px ，那么 1rem=640px/20=32px , <html>的 font-size为32px 。

因为 rem.js 是作用在<html>上，所以页面引入的时候最好是放在所有资源之前，例如：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>我不二，我很纯洁！</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/rem.js"></script>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
    <div>我不二，我很纯洁！</div>
    
<script type="text/javascript" src="js/jQuery.js"></script>
</body>
</html>

/* rem.js文件内容 */
(function () {
    var html = document.documentElement;

    function onWindowResize() {
        html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px';
    }

    window.addEventListener('resize', onWindowResize);
    onWindowResize();
})();

在我们实际切图的时候，对于视觉稿上的元素尺寸换算，只需要元素的 原始的px值(即你量的大小) 除以 rem基准值 即可。例如设计稿的大小为640px， rem基准值 = 640px/20 = 32px ，有个元素的大小你量出来是 140px286px* ，那么换算过来就是：

140px = 140/32 = 4.375rem
286px = 286/32 = 8.9375rem

px自动转换为rem

在实际生产当中，如果每一次计算 px 转换 rem，会非常麻烦，所以我们要用由手淘团队 @正霖开发的 px值转rem值的Sublime Text3自动完成插件 CSSREM 。

插件使用方法：

打开 Sublime Text3 > preferences > 浏览程序包

打开sublime text的插件包
把 cssrem 文件夹放进去（路径 *\Sublime Text3\Data\Packages\）

放入cssrem
放进去后，会在 preferences > Packge settings 下有 cssrem

Packge settings下查看
打开 preferences > Packge settings > cssrem > Settings Default ，全选复制

配置cssrem
打开 preferences > Packge settings > cssrem > Settings User ，粘贴，把 "px_to_rem" 的值变为设计稿的 rem基准值(设计稿宽度/20)，保存

设置rem基准值
在用的时候有弹出框就证明成功了

成功演示
完成

本教程是最简单的 rem 适配，更加详细的适配请参看手淘的解决方案。