CSS-单位em 和 rem

1,em单位（css3新增单位）

em:就是一种长度单位，它是参照当前元素的字号，如果没有设置，就参照父容器，一直到浏览器的默认字号大小

em 是相对长度单位（参照父元素），其参照当前元素字号大小，如果当前元素未设置字号则会继承其祖先元素字号大小。

比如：当前盒子的字号大小为:

.box {
font-size:16px;
width:10em;
height:10em;
}
/*那么此时，盒子宽高为 160px X 160px*/

2,rem单位（css3新增单位）

rem：也是一种长度单位，但不同的是，rem参照的是 html的字体大小，而为元素设置宽高的，而不是参照自身字号，或者父元素的字号

l例如：

/*浏览器的默认字号是：16px*/
.remBox {
width:10em;
height:10em;
font-size:12px;
}
/*此时盒子大小不是 120X120，而是160X160*/

2.1 rem实现移动端适配方法

步骤：

1, 认识常见的移动设备宽度有：320px 360px 375px 414px

2，将美工设计好的稿件人为地分为若干份：此处我分为 20 份；

****美工的设计稿一般都是 640px 或者 750px

****我们以 640px 的 UI 为例。一般我们把 640px 的 UI 分成 20份，那么每一份的大小为 32px。那么 750px 的 UI 分成 20份，那么每一份的大小为 37.5px。

3，此时我就可以根据需要划分 n份来分布为每一个盒子

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>rem实现移动设备的适配</title>
    <style type="text/css">
        @media screen and (device-320px) {
            html {
                font-size: 16px;
            }
        }
        @media screen and (device-360px) {
            html {
                font-size: 18px;
            }
        }
        @media screen and (device-375px) {
            html {
                font-size: 18.75px;
            }
        }
        @media screen and (device-414px) {
            html {
                font-size: 20.7px;
            }
        }
        .allBox {
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="allBox">
        
    </div>

</body>
</html>
/*这样子，无论在哪一种主流的移动设备中，都可以占到整个宽度的一半*/

2.2 如何对美工的设计稿划分，如何放到移动端捏，如下

将美工设计好的稿件人为地分为若干份：此处我分为 20 份；

****美工的设计稿一般都是 640px 或者 750px

****我们以 640px 的 UI 为例。一般我们把 640px 的 UI 分成 20份，那么每一份的大小为 32px。那么 750px 的 UI 分成 20份，那么每一份的大小为 37.5px。

如果在美工稿（640px）上面有一个 400X400 的盒子，就可以通过如下代码实现在设备上的占比：

.box400 {
width:400/32rem;
height:400/32rem;
}
/*前提是已经分为了20份*/
/*此时该盒子在对应的移动设备也占了相对应的份数*/