前端修炼小册

长度和单位

# 长度和单位

CSS 单位 px，em，rem，vw，vh，%，vm 的区别

# px

px 就是 pixel 的缩写，意为像素。它是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是 1024x768，表示的是水平方向是 1024 个像素点，垂直方向是 768 个像素点。

在网页设计中，px 是最常用的基本单位，它是相对于显示器屏幕分辨率而言的。

# em

em 是相对长度单位。参考物是父元素的 font-size，具有继承的特点。如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸。

如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值。

特点：

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

# rem

# 简介

rem 是 CSS3 新增的一个相对单位，rem 是相对于根元素 html 的字体大小（font-size）来计算的长度单位。

如果你没有设置 html 的字体大小，就会以浏览器默认字体大小（16px）为基准，即 1rem = 16px。但如果此时将 rem 与 px 进行换算很麻烦，比如 0.75rem = 12px。

为了更方便的进行换算（比如1：10），在做移动端页面时，业内流行用 62.5% 来初始化（16px * 62.5% = 10px）。这么做的好处是令 1rem = 10px（同理 1.2rem = 12px，1.4rem = 14px），这样响应式的时候就可以直接改变 font-size 而无需计算其他各种样式中出现的尺寸了。

/* rem 的初始赋值：1rem = 10px */
html {
  font-size: 62.5%;
}

body {
  font-size: 1.4rem;  /* 1.4 × 10px = 14px */
}
1
2
3
4
5
6
7
8

优点：只需要设置根目录的大小就可以把整个页面成比例地调好。不会像 em 那样，依赖于父元素的字体大小，而造成混乱。

rem 兼容性：除了 IE8 及更早版本外，所有浏览器均已支持 rem。

em 与 rem 的区别：rem 是相对于根元素（html）的字体大小，而 em 是相对于其父元素的字体大小。

两者使用规则：

  • 如果这个属性根据它的 font-size 进行测量，则使用 em；
  • 其他的一切事物属性均使用 rem。

# 62.5% 和 10px 的区别

在给 html 设置默认字体大小时（rem 的初始赋值），选择 62.5% 而非 10px 的原因，主要是出于兼容性和未来发展趋势的综合考虑。

桌面浏览器默认页面字体大小是 16px，这种情况下设置成具体像素大小或者对应的百分比，看起来的效果是一样的；

但是其他类型的设备的默认字体大小不一定是 16px，特别是高分辨率的设备，16px 大小的字体在它们上面看起来会非常小，所以不能在 html 上设置具体像素值，设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最适合用户浏览的字体大小。

# Chrome 浏览器 12px 的坑

我们开发常用的 Chrome 浏览器，支持的最小字体大小是 12px，此时使用 62.5% 会令 Chrome 和其他浏览器的页面效果不一样。这也是为什么上面说，在做移动端页面时用 62.5% 来初始化。

解决办法：

/* rem 的初始赋值：1rem = 100px */
html{
    font-size: 625%;
}
1
2
3
4

1rem = 100px，以此为单位进行换算，可以避免以上问题的出现。

# vw、vh

# 简介

vw、vh、vmax、vmin 这四个都是 CSS3 中的新单位，是一种视窗单位，也是相对单位，它们的大小都是由视窗大小来决定的，单位 1，代表类似于 1% 。具体描述如下：

  • vw：视窗宽度的百分比（1vw 代表视窗宽度的 1%）
  • vh：视窗高度的百分比（1vh 代表视窗高度的 1%）
  • vmin/vm：取当前 vw 和 vh 中较小的那一个值
  • vmax：取当前 vw 和 vh 中较大的那一个值

视窗，指的是浏览器可视区域的宽高（也就是不包括工具栏和按钮的内容区域），可以通过 window.innerWidth 和 window.innerHeight 获得。1vw 就是 1% 的浏览器的宽度，100vw 就是整个视窗的宽度。

（浏览器可视区域的宽高）

# vw、vh 与 % 百分比的区别

  • % 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
  • vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

# vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。 由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

# 百分比 %

一般来说就是相对于父元素。

  • 对于普通定位元素就是我们理解的父元素；
  • 对于 position: absolute; 的元素是相对于已定位的父元素；
  • 对于 position: fixed; 的元素是相对于 ViewPort（可视窗口）。

# 常见问题

  • 假如使用 em 来设置文字大小要注意什么？
    注意父元素的字体大小，因为 em 是根据父元素的大小来设置的。 比如同样是 1.5em，要是父元素是 20，那 1.5em 就是 30px；要是父元素是 30px，1.5em 就是 45px（特别是在多重 div 嵌套里面更要注意）

  • pt、pc、ch 一般用在什么场景？
    这些我们网页设计基本上用不到，在排版上会有用处。

  • 如果父元素没有指定高度，那么子元素的百分比的高度是多少？
    会按照子元素的实际高度，设置百分比则没有效果。

（完）

盒模型