专栏首页MudOnTire聊一聊CSS中的长度单位

聊一聊CSS中的长度单位

CSS中有很多属性可以接受长度值,比如: width, height, margin, padding, border-width, font-size, text-shadow。因为使用场景多,因此CSS也提供了许多长度单位。有的是日常生活中使用的单位,比如:厘米(cm)和英寸(in);有的是印刷行业使用的单位,比如:point(pt)和pica(pc);有的是专门为CSS发明的单位,比如:px。

使用场景

那么这些属性和单位怎么配合使用呢?特定的属性需要使用特定的单位吗?其实并非如此,单位和属性无关,同一个属性任何单位都适用,何时使用何种单位是没有限制的,如果属性接受以px为单位的值(比如:margin: 5px),那么它也可以接受英寸或厘米(margin: 1.2in; margin: 0.5cm)为单位的值,反之亦然。

单位虽然和属性无关,但是和输出的媒介有一定关系,比如输出到是屏幕还是纸张。在屏幕上显示和在纸张上面打印推荐使用的单位是不一样的。下表给出了推荐的使用方法:

输出媒介

推荐

偶尔使用

不推荐

屏幕

em, px, %

ex

pt, cm, mm, in, pc

打印

em, cm, mm, in, pt, pc, %

px, ex

除了和输出媒介的关系,这些单位可以从长度值的计算方式区分为绝对单位和相对单位。

绝对单位

绝对单位(px,cm, mm,in,Q,pt和pc)意味着以此为单位的长度值与其代表的物理长度相等,比如width: 1cm即与现实世界中的1cm长度相等,也意味着绝对单位在所有的媒介上的显示效果是一致的。但这是理想情况,受显示器和不同浏览器CSS实现的差异,在很多设备上绝对单位显示的并不精确。因为px和in的关系为1in=96px, 在低分辨率设备上,1px为1像素(pixel,也是px名称的由来)长度,而低分辨率的屏幕上1px往往大于1/96in,所以从px计算得到的其他绝对单位值都不准确。而在高分辨率设备上(如现在的高清屏和打印机)绝对单位显示得更精确。由于以上原因,绝对单位更多的是在打印时使用。

曾经,CSS要求在计算机屏幕上正确显示绝对单位。但是由于大部分厂商并不能实现这一要求,所以CSS在2011年放弃了这一要求。目前,绝对单位仅在打印和高分辨率设备上正常工作。CSS没有明确定义“高分辨率”的含义。但是,由于目前低端打印机的每英寸点数为300 dpi,而高端屏幕的每英寸点数为200 dpi,因此所谓的“高分辨率”可能介于两者之间。。

下面贴出绝对单位直接的换算公式:

1in = 2.54cm = 25.4mm = 72pt = 6pc = 96px

px

作为CSS中最常用的单位,关于px还是有必要多说两句的。px的特点可以归纳如下:

  1. 在低分辨率设备上,1px = 1像素;
  2. 在高分辨率设备上,1px = 1/96in,1px不一定等于1像素(比如4.7英寸的iphone上 1px=2像素);
  3. 对于图片显示,1px = 1图片像素,比如:一个600x400分辨率的照片的的CSS宽高即为600px和400px(在4.7英寸iphone上要用1200x800个像素点显示);

相对单位

相对单位意味着长度值是根据其他长度计算得出的。相对单位又可以分为基于字体(font based)和基于视窗(viewport based)的:

Font Based

em, ex

首先说说em和ex,em代表元素的当前字体大小,如果元素的font-size2cm,那么1em即表示2cm。em可以用于控制尺寸,比如margin: 1em; text-indent:1.5em,此时这些尺寸和元素字体大小相关,因此在大屏幕上(字体尺寸较大)和小屏幕上(字体尺寸较小)会等比缩放,因此em可以用于响应式的设计。如果em直接用于font-size属性,如font-size: 2em,则em表示为父元素字体的大小。

ex很少被使用,ex表现的大小与字体的x-height相关。x-height大致等于字体中小写字母(例如a,c,m或o)的高度。相同font-size的不同字体的x-height可能会有很大的差别,所以使用ex产生的效果存在很大的不确定性。

rem

CSS在2013年创造出了一个新的单位rem,rem表示的是根元素(html元素的)字体大小,在每个元素里面em都可能不一样,但是rem都是一致的。因为这一特性,rem现在被更广泛的应用于响应式设计。

ch

ch用的表较少,是CSS3中新加入的单位,表示当前字体中的 "0" (零、unicode 字符 U+0030) 的宽度。

Viewport Based

vw,wh,vmin,vmax

都是CSS3中新加入的单位。vw,vh可以根据视窗大小调整字体大小。vw是视窗的1/100的宽度,而vh是视窗1/100的高度。此外还有vmin,它指的是vw以及vh间较小的那个,与之相对的还有vmax。这些单位在目前大部分浏览器上都有支持。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • BFC笔记?

    BFC(Block Formatting Context,块格式化上下文)指的是CSS布局的一块独立渲染区域。这块区域内只有Block-level box参与布...

    gojam
  • RWD:viewport笔记

    Apple为了让网页在iphone上显示而设计的meta tag。尚未列入W3C标准但已得到主流浏览器支持。

    gojam
  • vue前端UI框架,一点都不圆润,盘它!

    VUX(读音 [v’ju:z],同 views)是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面。

    用户1272076
  • 用CSS画一个QQ音乐图标

    主要用到了relative定位、border的垂直和水平分量,之所以用区块遮盖实现内凹,因为radial-gradient我不太熟悉。

    gojam
  • 用webfont为你的网站添加图标

    实际上e942是这个字符的16进制unicode编码,在unicode编码中,E000-F8FF是用户自定义区,形状可以任意制定。如果我们向网站引入自定义后的字...

    gojam
  • CSS常用选择器

    HTML: <element class="classname"></element>

    gojam
  • Python爬虫入门教程 65-100 爬虫与反爬虫的修罗场,点评网站,字体反爬之三

    如何从<svgmtsi class="zrvm6"></svgmtsi>得到数字6呢

    梦想橡皮擦
  • 外边距折叠(Margin collapsing)笔记?

    外边距折叠是指有时候上边距与下边距坍缩成较大的那一个边距的行为。它只会发生在同一BFC的块级元素间,并且永远不会发生在浮动元素或绝对定位元素间。

    gojam
  • CSS Functions && CSS Variables

    calc()用于对数值作计算,单位包括长宽(px、vw等)、频率(Hz等)、角度(deg、rad、turn等)、时间(s、ms)、小数和整数。

    gojam
  • 【CSS系列】被忽略的content属性

    版权声明:本文为原创文章首发于公众号:六小登登 , 你可以随意转载但请务必注明出处!!!关注微信公众号:六小登登,回复 「1024」领取资源大礼包 ht...

    六小登登

扫码关注云+社区

领取腾讯云代金券