前言:随着 PC 端的网页盛行,移动端作为重要的一部分,也是火热的发展,但是鉴于一些单位的使用,我们并不知道该怎样去使用,那么今天我们来看看常用的三种单位PX、rem与em。

一.PX

1.概念:

px 像素（Pixel）。相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。<br>PX:px 是pixel的缩写，是像素单位也是为影像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“画像元素”之意，有时亦被称为pel（picture element）。<br>像素:像素是指在由一个数字序列表示的图像中的一个最小单位，称为像素。像素是分辨率的单位，分辨率越高,那么显示效果就越精细和细腻。相机所说的像素，其实是最大像素的意思，这个像素值仅仅是相机所支持的有效最大分辨率。

.box{  width:200px;  height:200px;}

2.特点:

1. IE 无法调整那些使用 px 作为单位的字体大小；

2. 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位；

3. Firefox 能够调整 px 和 em，rem，但是 96%以上的中国网民使用 IE 浏览器(或内核)。

二.em

em 和 rem 都是灵活可扩展的单位，由浏览器转换为像素值，取决于设计中的字体大小，如果使用值 1em 或 1rem ，它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ，那么 1px 始终显示为完全 1px。

1.概念:

em:em 是相对长度单位。其相对于当前对象内文本的 font-size，如果当前文本的字体尺寸没有设置，则相对于浏览器的默认字体尺寸。

2.特点:

1. em 的值并不是固定的；

2. em 会继承父级元素的字体大小。

3.注意:

注意：任意浏览器的默认字体高都是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 数值。避免字体大小的重复声明。<br>

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

4.为什么使用 em:

em 单位取决于一个font-size值而非 html 元素的字体大小。<br>为此，em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性<br>例如，您可能使用 em 值设置导航菜单项的 padding、 margin，line-height 等值。带有 0.9rem 字体大小的菜单<br>通过这种方式，如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。

   body {            font-size: 62.5%;        }           .box {       font-size: 1.4em;   }

5.重点理解:

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据 W3 标准 ，它们是相对于使用 em 单位的元素的字体大小。父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。

三.rem

1.概念:

rem:是 CSS3 新增的一个相对单位（root em，根 em），这个单位引起了广泛关注。这个单位与 em 有什么区<br><br>别呢？区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个<br><br>单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大<br><br>小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。对<br><br>于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字<br><br>体大小。

 html {        font-size: 42.66px !important;    }  .box{     font-size: .25rem;  ||    font-size: 20px;  }

2.特点:

根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。所以 html 元素的字体大小虽然是<br><br>直接确定 rem 值，但字体大小可能首先来自浏览器设置。因此浏览器的字体大小设置可以影响每个使用 rem<br><br> 单元以及每个通过 em 单位继承的值。

3.为什么使用 rem:

Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 相反，它给我们的一个途经去获取用<br><br>户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的 px 单位。为此，使用 rem 单位的主要<br><br>目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。

四.总结

1.rem 与 em:

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

2.px 与 rem:

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 。<br>对于需要适配各种移动设备，使用rem，例如只需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备。

3.综述:

1. rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。

2. em 单位基于使用他们的元素的字体大小。

3. rem 单位基于 html 元素的字体大小。

4. em 单位可能受任何继承的父元素字体大小影响

5. rem 单位可以从浏览器字体设置中继承字体大小。

6. 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。

7. 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。

8. 使用rem单位，除非你确定你需要 em 单位，包括对字体大小。

9. 媒体查询中使用 rem 单位

10. 不要在多列布局中使用 em 或 rem 改用 %。

11. 不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。