css3布局单位的更简单的解读

单位

cm: 厘米,不是物理距离,也可以理解为 1 / 2.54 * 96 = 37.79527559055118px
in: 英寸,也不是物理距离,也可以这么理解: 2.54 / 2.54 * 96 = 96px
px: 不同的 ppi 显示不一样的大小。
(ppi 越大则显示的越小)

vw: css3 才出的,窗口 1% 宽度,也就是说100vw 占满屏幕的宽。
vw: 窗口 1% 高度。
rem: 可以理解 vw 的自定义份数。
…… 略

rem

因为rem = document.documentElement.style.fontSize,所以需要通过 js 来改变html 元素的字体大小。
(完整的js 设置 rem: github.com/amfe/lib-flexible/blob/...)

const unit = 100
window.onload =() => document.documentElement.style.fontSize = document.documentElement.clientWidth /  unit + 'px'

这是将屏幕分成一百份,此时 vwrem一样的效果。
也就是说 width:100rem 也可以占满屏幕的宽。

这跟vw 区别是:

  1. rem需要通过js 改变 html 的字体大小,vwcss3 自带的。
  2. vw 只能是分为一百份,rem 可以想分多少份都行。
  3. rem老,vw新(也不算新了)。(手动狗头)
本作品采用《CC 协议》,转载必须注明作者和本文链接
专心学习不瞎搞
讨论数量: 2

话说像素的大小在物理上是固定的吗

1个月前 评论
lyxxxh (楼主) 1个月前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!