CSS 单位

49 阅读4分钟

px

  • 绝对长度单位,像素是相对于显示器屏幕分辨率来说的,比较稳定和精准
  • IE 无法调整那些使用px 作为单位的字体大小
  • 国外的大部分网站能够调整的原因在于其使用了em 或rem 作为字体单位
  • Firefox 能够调整px 和em,rem,但是有大部分的国产浏览器使用IE 内核

一个像素表示了计算机屏幕所能显示的最小区域,像素分为两种类型:

  • CSS 像素(逻辑像素):为 Web 开发者提供,在 CSS 中使用的一个抽象单位
  • 物理像素:只与设备的硬件密度有关,任何设备的物理像素都是固定的

设备像素比(Device Pixel Ratio) = 一个设备的物理像素 / 逻辑像素

rpx

  • rpx 是微信小程序独有的、解决屏幕自适应的尺寸单位
  • 可以根据屏幕宽度进行自适应,不论大小屏幕,规定屏幕宽为 750rpx
  • 通过 rpx 设置元素和字体的大小,小程序在不同尺寸的屏幕下,可以实现自动适配

rpx 和 px之间的区别:

  • 在普通网页开发中,最常用的像素单位是px
  • 在小程序开发中,推荐使用 rpx 这种响应式的像素单位进行开发

em

  • 根据基准来缩放字体的大小。

  • em 是相对长度单位,相对于当前元素的父元素的 font-size 进行计算,如果当前元素未设置则相对于浏览器的默认字体尺寸。当改变浏览器设置里的字体大小时,em 值也会相应改变。

  • em 会继承父级元素的大小,类似百分比。

  • em 作为行高单位时,相对于自身字体大小,整个页面内 1em 不是一个固定的值。

  • 任意浏览器的默认字体高都是16px。

    所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

    为了简化font-size 的换算,需要在css 中的body 选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

  • 重新计算那些被放大的字体的em 数值。避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44 的现象。

    比如:你在#content 中声明了字体大小为1.2 em,那么在声明p 标签的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content 的字体高而变为了1em=12px。

rem(font size of the root element)

  • 相对长度单位
  • rem 是相对于根元素(html)的 font-size 进行计算,rem 不仅可设置字体大小,也可以设置元素宽高属性。
  • 和px 之间的转换规则和em 一样。它的优势在于不会继承父级元素,所以值固定。
 html { font-size: 62.5%; /* 10 ÷ 16 × 100% = 62.5% */ }
 body { font-size: 1.4rem; /* 1.4 × 10px = 14px */ }
 h1 { font-size: 2.4rem; /* 2.4 × 10px = 24px */ }

在根元素<html>中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以16px 为基准 )。

从上面的计算结果,使用rem 就像使用px 一样的方便,而且同时解决了px 和em 两者不同之处。

px 与 rem 的区别:

  • px 对于只需要适配少量设备,且分辨率对页面影响不大的,使用 px 即可, px 设置更为精准 。
  • 随着 rem 在众多的浏览器都得到支持,有需要考虑到对多设备,多分辨率的自适应,无疑这时候 rem 是最合适的(如:移动端的开发)。

Rem 的缺点:

  • 小说网站,屏幕越小的移动设备如果用了rem 肯定文字就越小,就会导致看文章的时候特别费眼

vw/vh

CSS3 特性 vh 和 vw:

  • vh 相对于视窗的高度,视窗高度是100vh
  • vw 相对于视窗的宽度,视窗宽度是100vw

视窗指的是浏览器内部的可视区域大小,即 window.innerWidth/window.innerHeight 大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

百分比

通常认为子元素的百分比完全相对于直接父元素。

如果设置了top、margin、padding 等:

  • 子元素的 top 和 bottom 如果设置百分比,则相对于直接非 static 定位(默认定位)的父元素的高度
  • 子元素的 left 和 right 如果设置百分比,则相对于直接非 static 定位(默认定位的)父元素的宽度
  • 子元素的 padding/margin 如果设置百分比,不论是垂直方向或者是水平方向,都相对于直接父亲元素的 padding/margin ,而与父元素的 height 无关。