CSS中的长度单位(px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)

CSS中有许多设置长度单位的属性,除了经常使用的px,em之外,还有一些不太经常使用的,但是作为一个前端工程师,也是很有必要了解的。

绝对长度单位

px

px(pixel)其实应该算是我们最熟悉的长度单位了,是相对屏幕分辨率而言,也是经常被作为其他单位的基准。这个px和物理设备的像素是有区别的,为了保证在不同设备上视觉效果基本相同,px是采用参考像素的,根据css的规范上来看,1px在电脑显示器上看,大概是1/97英寸长。

in

ininches的简写,在CSS中, 它与px的换算关系为

1in == 96px

cm

厘米是在现实生活中,运用的比较广泛的单位,与px的换算关系是

1cm == 37.8px

mm

cm小一个数量级,换算关系为

1mm == 0.1cm == 3.78px

相对长度单位

相对长度单位,顾名思义,它的长度是根据其他长度计算出来的。 viewport相关的单位本来也是属于这一部分的,但是为了区别对待,把它单拎出来了。

em

em(font size of the element) 是相对于当前元素的字体大小(font-size)属性值计算出来。由于浏览器默认字体大小是16px,则在默认情况下1em = 16px。如果当前元素没有设置字体大小就依赖其父元素的大小。如果其父元素的大小也没有显式的font-size,则向上寻找直至找到能进行计算的元素。这个单位一个比较常见的使用场景是在中文段落的首段缩进两个字。即:

p {
  text-indent: 2em;
}

建议在设置字体单位和行距的时候采用em,这样用户在缩放网页的时候,能保证字体的正常缩放。

rem

rem(font size of the root element)和em有点类似,不过是相对根元素进行计算的。只要在html元素上指定了其font-size大小,后面的元素都将使用这个大小作为基准进行计算。兼容性方面,目前除了IE8之外,所有浏览器基本都已支持rem了。不过有时候为了兼容性,会采用这种写法:

p {
  font-size: 16px;
  font-size: 1rem;
}

这样,当浏览器不支持该属性的时候,会自动忽略掉rem设定的大小。

这个单位目前也经常被用来做屏幕适配。可以利用媒体查询或者js代码来动态设置根元素的font-size,后续的元素采用rem单位,这样就可以保证在不同设备下的显示效果。具体可以参考http://www.alloyteam.com/2016/03/mobile-web-adaptation-tool-rem/。

ex

相对于元素字体的x-height, 这个x-height取自字符x的高度的意思。与em有所区别的是,当你改变字体font-family的时候,使用em单位的其大小不会受到影响,而ex会根据字体重新计算出新的大小。

ch

ex单位有点类似,不过是基于'0'这个字符字体的宽度,而不是x这个字符字体的高度进行计算的。

基于viewport视区的长度单位

视区(viewport),就是浏览器可视化的区域,这个可视区域是window.innerWidth/window.innerHeight的大小。而CSS中,和视区相关的单位有四个,分别为vw,vh,vmin和vmax。这些单位都依赖屏幕的可视区域,因此也可以用于响应式排版和布局。

vw/vh

vw是viewport's width的简写,表明它的值是根据视口的宽度计算而来的,换算关系是1vw等于百分之一的window.innerWidth。与vw类似,vh是根据视口高度计算出来的。

vmin/vmax

这个单位是根据视区中长度偏大的那个维度值计算出来的,就是如果window.innerHeight > window.innerWidthvmin取百分之一的window.innerWidthvmax取百分之一的window.innerHeight计算。



作者:SCQ000
链接:https://www.jianshu.com/p/5d1f811082f2
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

你可能感兴趣的:(css)