平时或许你用过不少css的单位,相对和绝对单位你都用过,这里将会列出所有的。
css单位
css单位:em,ex, %,px,cm,mm,mozmm,in,pt, pc,ch,rem,vh,vw,vmin,vmax。先看看各单位的浏览器兼容性:
1.png
单位分类
单位分类:相对单位和绝对单位。
1. 相对单位
em 相对于直接父元素的字体大小(font-size)。
ex 相对于当前字体的小写x字母的高度或者 1/2 的 1em(很少用)。很多时候,它是字体的中间标志。 大部分用于版式的微调。比如下标,上标等。
ch 相对于数字“0”的宽度。如:将一个等宽字体的字母”N”的宽度设置为40ch,那么在另一种类型的字体里它却可以包含40个字母。这个单位的传统用途主要是盲文的排版。
rem 相对于根元素的字体大小(网页中的根元素为html)。如:大多数浏览器默认字体大小:font-size: 16px。
html{ font-size:62.5%;/* 16×62.5%=10px */}
,那么1rem=10px。vw 相对于视窗(viewport)的宽度的1%。如:浏览器宽度750px, 1 vw = 750px/100 = 7.5px。
vh 相对于视窗(viewport)的高度的1%。如:浏览器高度1334px, 1 vh = 1334px/100 = 13.34px。
vmin 相对于视窗(viewport)的较小尺寸的1%,就是指视窗的宽和高中较小那个。如:浏览器的宽度750px,高度1334px,1vmin = 750px/100 = 7.5px。
vmax 相对于视窗(viewport)的较大尺寸的1%,就是指视窗的宽和高中较大那个。如:浏览器的宽度750px,高度1334px,1vmax = 1334px/100 = 13.34px。
% 百分比。
注:em, rem, %常用于自适应处理。Viewport =浏览器窗口大小。
2. 绝对单位
cm 厘米
mm 毫米
in 英寸(1in = 96px = 2.54cm)
px 像素 (1px = 1/96th of 1in)
pt 点(1pt = 1in/72)
pc 排卡(1pc = 12 pt),相当于我国新四号铅字的尺寸。
**注:1in = 2.54cm = 25.4 mm = 72pt = 6pc *
单位对比
这些单位的大小对比,可以看这里。
参考:
作者:恬雅过客
链接:https://www.jianshu.com/p/2f8e10c86fbc