何为em?
em是相对单位。相对于当前对象内文本的字体尺寸。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
通俗地讲就是：1em = 20px（相对font-size，假设这个元素font-size=20px）,如果元素本身没有设置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效果
- 在con_1中，因为本身没有font-size，所以10em=10*20px(父级的font-size)=200px，宽高为200px。
- 在con_2中，因为本身有font-size，所以10em=10*30px(自身的font-size)=300px，宽高为300px。
如果用em布局会出现一个问题，进行任何元素设置，都需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。
rem现身
在W3C官网上是这样描述rem的——"font size of 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，所以con_1和con_2的宽高为160px
如何适配各种设备的屏幕
了解了rem的基本原理，我们来看看如何利用rem来完美适配各种设备屏幕。理想的适配是把设计稿直接等比缩放在设备上，这样在任何不同的屏幕上布局都会很完美，手淘就是用的rem来进行适配的。
有人用rem.js来解决问题：
事实上rem.js是把屏幕等分成20份，每份为1rem，如果设备的物理像素宽为640px，那么1rem=640px/20=32px,<html>的font-size为32px。（1rem对应的大小就是rem基准值，rem.js做的就是把rem基准值给<html>的font-size）。
因为rem.js是作用在<html>上，所以页面引入的时候最好是放在所有资源之前，例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>rem布局</title>
<script type="text/javascript" src="js/rem.js"></script> //在这里引入
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div>rem布局厉害了</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，有个元素大小你量出来是140px*286px，那么换算过来就是：
140px=140/32=4.375rem286px=286/32=8.9375rem
px自动转换成rem
在实际生产当中，如果每一次计算px转换rem，就会非常麻烦，所以：
在Sublime Text3中安装插件CSSREM，即可完成自动转换。
网友评论