css px em rem % vw vh vm 区别

Posted 2022-11-26

前言

在传统项目开发中，我们只会用到 ​​px、%、em​​ 这几个单位长度，它们可以适用大部分项目的开发，并且拥有较好的兼容性。

而从 ​​css3​​​ 开始，浏览器对逻辑单位的支持又提升了新的境界，增加了 ​​rem、vh、vw、vm​​ 等新的单位长度。

新技术的出现必然是为了解决旧技术存在的问题和不便，我们利用这些新的单位可以开发出更为完善的响应式页面，从而覆盖更多不同分辨率的终端。

下面介绍下它们分别是什么？以及如何使用？

px

px 像素（Pixel），是指由图像的小方格组成的，可以将像素视为整个图像中不可分割的单位或者是元素。

比如我们常常听到的电脑像素是 1024x768 的，表示的是水平方向是 1024 个像素点，垂直方向是 768个 像素点。

px 是图像的绝对长度单位，是相对于显示器屏幕分辨率而言的，是图像上最小的一个点，一旦设置了就无法因为适应页面大小而改变。

为了解决 px 的问题，提出了相对长度单位 em 。

em

em 是相对长度单位，在 font-size 中使用是相对于父元素的字体大小；在其他属性中使用是相对于当前对象内文本的字体尺寸。如没有对行内文本的字体尺寸设置，则相对于浏览器的默认字体尺寸，一般为 16px。

em 单位如何转换为像素值

任意浏览器的默认字体高 (font-size) 都是 16px。所有未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em，10px=0.625em。

em 值等于，实际 px 值除以父级 font-size 值。

为了简化 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 的值并不是固定的，而是会继承父级元素的字体大小，所以 em 使用起来依旧有诸多不便，复杂的嵌套逻辑使得更改了部分元素会产生字体大小变化的连锁反应。

rem

rem 是 CSS3 新增加的相对单位，即 root em，是相较于根元素（html)。rem 的根据根节点使得计算更清晰。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持 rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用 rem 设定的字体大小。

下面就是一个例子：

p font-size:14px; font-size:.875rem;

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

rem 单位如何转换为像素值

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。

html 
  font-size: 16px;

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

rem 值等于，实际 px 值除以根 html 的 font-size 值。

px 与 rem 的选择？

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用 px 即可 。

对于需要适配各种移动设备，使用 rem，例如只需要适配 iPhone 和 iPad 等分辨率差别比较挺大的设备。

vw、vh

vw、vh、vmax、vmin 这四个单位都是基于视口

vw 是相对视口（viewport）的宽度而定的，长度等于视口宽度的 1/100

假如浏览器的宽度为 200px，那么 1vw 就等于 2px（200px/100）

vh 是相对视口（viewport）的高度而定的，长度等于视口高度的 1/100

假如浏览器的高度为 500px，那么 1vh 就等于 5px（500px/100）

vmin 和 vmax 是相对于视口的高度和宽度两者之间的最小值或最大值

%（百分比）

在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

1、对于普通定位元素就是我们理解的父元素

2、对于 position: absolute; 的元素是相对于已定位的父元素

3、对于 position: fixed; 的元素是相对于 ViewPort（可视窗口）

vm

css3 新单位，相对于视口的宽度或高度中较小的那个

其中最小的那个被均分为 100 单位的 vm

比如：浏览器高度 900px，宽度 1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px

缺点：兼容性差

实例

em

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

div 
  font-size: 40px;
  width: 10em; /* 400px，每份em为font-size的大小，10*40=400 */
  height: 10em;
  border: solid 1px black;

p 
  font-size: 0.5em; /* 20px，每份em为父级div的font-size大小，0.5*40=20 */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;

span 
  font-size: 0.5em;  /* 逻辑上为 10px，每份em为父级p的font-size大小，0.5*20=10 */
  width: 10em; /* 逻辑上为100px，10*10=100 */
  height: 10em;
  border: solid 1px blue;
  display: block;

chrome 设置的最小字体大小为 12px，也就是说低于 12px的字体大小会被默认为 12px。

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

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

rem

rem 是全部的长度都相对于根元素 html。通常做法是给 html 元素设置一个字体大小，然后其他元素的长度单位就为rem。

<div>
    我是父元素div
    <p>
        我是子元素p
        <span>我是孙元素span</span>
    </p>
</div>

html 
    font-size: 10px;

div 
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;

p 
    font-size: 2rem; /* 20px */
    width: 15rem;
    height: 15rem;
    border: solid 1px red;

span 
    font-size: 1.5rem; /* 15px */
    width: 10rem;
    height: 10rem;
    border: solid 1px blue;
    display: block;

总结

• px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。
• em 和 rem 相对于 px 更具有灵活性，更适用于响应式布局，em 相对于父元素，rem 相对于根元素。
• 由于 em 存在继承关系，每个元素会自动继承其父元素的字体大小，嵌套使用时容易发生连锁反应；
• 而使用 rem 只有一个根元素 html 参照物，计算更为清晰