网页设计中经常用到的长度单位:px、em、rem、%、vw、vh、vmin、vmax。我自己没系统学过网页设计,所以对这些概念都一知半解(感谢谷歌,感谢百度...)。平时要修改页面样式,或者添加个Function时才会改改代码,而且大多都是直接复制粘贴的,惭愧惭愧!那今天就抽空整理下这些常用长度单位。

1、px

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

2、em

  相对长度单位,这个单位表示元素的font-size的计算值。如果用在font-size 属性本身,它会继承父元素的font-size。如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。

3、rem

  相对长度单位。相对于根元素html(网页)的font-size,不会像em那样,依赖于父元素的字体大小,而造成混乱。

4、%

  相对长度单位。一般宽泛的讲是相对于父元素,但是并不是十分准确。百分比是针对与该元素的包含块来计算的。

  1. 对于普通定位元素就是我们理解的父元素
  2. 对于position: absolute;的元素是相对于已定位的父元素
  3. 对于position: fixed;的元素是相对于 ViewPort(可视窗口)

5、vw

  相对长度单位。viewport width的缩写,视窗宽度,1vw等于视窗宽度的1%。

6、vh

  相对长度单位。viewport height的缩写,视窗高度,1vh等于视窗高度的1%。

7、vmin

  相对长度单位。相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位。

8、vmax

  相对长度单位。相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位。

举个例子:

浏览器视口高度900px,宽度1200px,那么:
1 vh = 900px/100 = 9 px。
1 vw = 1200px/100 = 12 px。
1 vmin = 900px/100 = 9 px。
1 vmax = 1200px/100 = 12 px。

9、绝对长度单位

  1. in: 寸
  2. cm: 厘米
  3. mm: 毫米
  4. pt: point,点
  5. pc: pica,派卡

转化关系:1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px

注:还有诸如 ex、ch、lh、rlh、vi、vb 等请参考博文:CSS笔记#长度单位 | 余真帆的博客

10、参考文章

  1. px、em、rem、%、vw、vh、vm这些单位的区别 - 简书
  2. CSS笔记 | 余真帆的博客
  3. CSS 长度(Length) - CSS 教程手册(新) - html中文网

本文标签:网页设计CSS