移动端开发之px，em和rem详解

标签：

px:表示的是绝对的像素值，1px就是1像素大小

em:关于em，网上有资料说是关于父元素的，但是其实个人感觉这种说法是不对的，其实em的大小是根据自身的font-size确定的，而只是正常的情况下子元素继承了父元素的font-size

rem:是指根元素的大小，比如跟元素大小是16px(浏览器默认font-size)，那么1rem的大小就是16px

举个例子：

我们先来写一段代码：

    <div class=‘div1‘>
        <div class=‘div2‘></div>
    </div>

        .div1{
            width: 100px;
            height: 100px;
            font-size: 16px;
        }
        .div2{
            width: 1em;
            height: 1em;
            background: red;
        }    

上面的代码中，我们在浏览器运行就会得到结果，div2的width和height为16px，也就是现在div2元素的font-size的值也就是他的父元素设置的font-size的值，下面我们来改写下上面代码的css：

        .div1{
            width: 100px;
            height: 100px;
            font-size: 16px;
        }
        .div2{
            width: 1em;
            height: 1em;
            font-size: 12px;
            background: red;
        }

当我们在div2的style里面设置了自己的font-size为12px，我们在运行代码，我们可以得到我们当前的div2中的width和height的值为12px。这样子我们就可以得到结论，em的值其实是根据自己来设定的，准确的说是自己的font-size的值，由此可见网上很多说em是相对于父元素的值的说法是错误的。

但是在开发中我们的每个元素都有不同的font-size那么我们就需要根据这个计算出不同的width和height的em值，这样子无论是开发还是维护起来成本都太高了，还有一个更严重的问题是层级嵌套会让我们对每个元素的font-size变得混乱。

所以一个更加友好的元素rem诞生。

所谓的rem根据的就是跟节点的font-size的值，举个例子：

        html{
            font-size: 20px;
        }
        .div1{
            width: 1rem;
            height: 1rem;
            font-size: 12px;
            background: red;
        }

        <div class=‘div1‘></div>

运行上面的代码，我们得到了当前div的width和height的值为20px，看来rem集成的是html的font-size并没有继承自己的font-size这样子我们开发起来就有一个相对的值了，这样的意义在于我们可以根据不同页面的width来设置不同的font-size值来实现移动端的适配问题，这个也就是手淘flexible的设计原理了，下一章我将会给大家讲解一下关于flexible的源代码！

移动端开发之px，em和rem详解

标签：

原文地址：http://www.cnblogs.com/jcscript/p/5789403.html