rem和em学习笔记及CSS预处理（未完待续）

以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟，收获满满！

1、当元素A的字体单位是n rem时，它将根据根元素（html）的font-size的大小作为基准，比如

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            html{font-size: 0.625rem;}

            .rem-div{background-color:#FFCC66;width: 10rem;height:20rem;font-size:2rem}

            .em-div{background-color:#17B8E8;width: 10em;height: 20em;font-size: 2rem;}

            .parent-div{background-color:#CCCCCC;font-size: 3rem;}

            .em-div-none{background-color:#228811;width: 10em;height: 20em;}

            .em-div-child{font-size: 0.9em;}

            .em-div-fontem{background-color: #FFCC66;width: 10em;height: 20em;font-size: 2em;}

        </style>

    </head>

    <body>

        <div class="rem-div">我的字体单位是rem</div>

        <div class="em-div">我的字体单位是em</div>

        <div class="parent-div">

            我是父元素，字体单位是3rem

            <div class="em-div-none">我是父元素中的子元素，字体单位是em,我不设置自己的字体大小</div>

            <div class="em-div-fontem">我是父元素中的子元素，字体单位是em</div>

            <div class="em-div">

                我是父元素中的子元素，字体单位是rem,我自己的字体大小为2rem,不受父元素影响，依赖根元素

                <div class="em-div-child">我是二级菜单，字体要继承父元素，并且比父元素字体小，字体单位是em</div>

            </div>

            <div class="rem-div">我是父元素中的子元素，字体单位是rem</div>

        </div>

    </body>

</html>

parent-div中的em-div的font-size为2rem,他的基准就是html的字体大小10*2=20,并不受父元素的影响。width:10em;就是20*10，即宽度为200px;

2、重点理解:

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。事实上，它们是相对于使用em单位的元素的字体大小。

父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。继承效果只能被明确的字体单位覆盖，比如px,vw。

使用 em 单位的元素字体大小根据它们来定。但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

可以通过比较以上代码中带有em-div-none和em-div-fontem样式的div可以看出差别。

3、当 em 单位设置在 html 元素上时，它将转换为em值乘以浏览器字体大小的设置，来作为html的font-size大小。那么，10em就是10*html的font-size;

4、总结 rem与 em 差异

rem 单位翻译为像素值是由 html 元素的字体大小决定的。此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
em 单位转为像素值，取决于他们使用的字体大小。此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。

5、rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不继承。

重要的是:

　　一些设计师使用结合 rem 单位的方式给html元素设置了一个固定的px单位。这是很普遍的做法，所以改变html元素的字体大小时，可以使整个页面做相应调整

　　这样的话，它重写继承了用户设置的浏览器字体大小。但是，这剥削了用户自行调整以获得最佳视觉效果的能力。

　　如果您确实需要更改 html 元素的字体大小，那么就使用em，rem单位，这样根元素的值还会是用户浏览器字体大小的乘积。

　　这将允许您通过更改您的 html 元素的字体大小，调整你的设计，但仍会保留用户的浏览器设置的效果。

6、em 单位取决于一个font-size值而非 html 元素的字体大小。

主要适用于：

　　设计组件比如按钮，菜单和标题可能会有自己明确的字体大小。当你修改字体大小的时候，你希望整个组件都适当缩放。

　　通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。

　　当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。

7、使用 em 单位:

根据某个元素的字体大小做缩放而不是根元素的字体大小。

一般来说，你需要使用 em 单位的唯一原因是缩放没有默认字体大小的元素。

根据我们上面的例子，设计组件比如按钮，菜单和标题可能会有自己明确的字体大小。当你修改字体大小的时候，你希望整个组件都适当缩放。

通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。

我建议，当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。

通常不使用 `em` 单位控制字体大小

我们经常会看到使用em作为字体大小单位，特别是标题，当我认为如果使用rem将更具可扩展性。

标题经常使用 em 单位的原因是他们相比px单位，在相对常规文本大小方面更出色。然而 rem 单位同样也可以实现这一目标。如果 html 元素上任何字体大小调整，标题大小仍会缩放。

我们可以想到的例子是一个使用 em 字体大小的下拉菜单，我们有第二个级别的菜单项文本大小取决于第一级字体大小。另一个例子可能是用在按钮里面的字体图标，字体图标的大小跟按钮的文本大小有关。

然而，大多数 Web 设计中的元素往往不会有这种类型的要求，所以一般使用 rem 单位的字体大小，em 单位只在特殊的情况下使用。

8、这里理解的不到位，先记录下来。

始终使用 rem 单位做媒体查询

特别注意，当使用 rem 单位创建统一可扩展的设计，媒体查询也应该是rem单位。这将确保，无论用户浏览器的字体大小，您的媒体查询会对它作出反应和调整您的布局。

例如，如果用户缩放文本非常高，您的布局可能需要从两列到单个列调整，因为它可能会在较小的移动设备上显示。

如果您的断点在固定的像素宽度，只有不同的视口的大小可以触发它们。但是基于 rem 的断点他们将响应不同的字体大小

9、

不要使用 em 或 rem的情况 :

多列布局

布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。

然而单一列一般仍然应使用 rem 值来设置最大宽度。

当元素应该是严格不可缩放的时候

在一个典型的 Web 设计的过程中，不会有很多部分的你不能使用伸缩性设计的布局。不过偶尔你会遇到真的需要使用显式的固定的值，以防止缩放的元素。

采用固定的尺寸值的前提应该是，如果被缩放的话，它的结构会被打碎。这真的不常出现，所以你想拿出那些 px 单位之前，问问自己是否使用它们是绝对必要的。

10、

总结

让我们以一个快速符号点概括我们介绍的内容:

rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em 单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
媒体查询中使用 rem 单位
不要在多列布局中使用 em 或 rem ,改用%。
不要使用 em 或 rem，除非缩放会不可避免地导致要打破布局元素。