Em 和 Rem 的基本使用

1. Em

html 结构

<div id="box-1">
    <h3>Box One</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam assumenda aut, animi sed minima iste omnis magnam dolorum vitae temporibus odio, commodi odit at incidunt? Quas voluptas veniam dicta corporis.
    </p>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3
            <ul>
              <li>1</li>
              <li>2</li>
              <li>3</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>4</li>
    </ul>
  </div>

css 样式

<style>
    #box-1 {
      font-size: 20px;
    }
    #box-1 p {
      font-size: 1.5em;
    }
    #box-1 ul {
      font-size: 1.2em;
    }
</style>

原理

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

• 1. em的值并不是固定的；
• 2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

• 1. body选择器中声明Font-size=62.5%；
• 2. 将你的原来的px数值除以10，然后换上em作为单位；
• 3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

(不建议使用em)

2. Rem

html 结构

<div id="box-2">
    <h3>Box One</h3>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam assumenda aut, animi sed minima iste omnis magnam dolorum vitae temporibus odio, commodi odit at incidunt? Quas voluptas veniam dicta corporis.
    </p>
  </div>

css 样式

html {
      font-size: 62.5%;
    }
    #box-2 h3 {
      font-size: 2rem;
    }
    #box-2 p{
      font-size: 1.6rem;
      line-height: 1.7rem;
    }

原理

rem是根据浏览器默认的字体来进行更改的

举例: 默认字体是 16px  那1rem = 16px  2rem = 32px

注意： 选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。