css3布局单位的更简单的解读
0 / 2 / 创建于 2年前 /
lyxxxh 的个人博客
单位
cm: 厘米,不是物理距离,也可以理解为 1 / 2.54 * 96 = 37.79527559055118pxin: 英寸,也不是物理距离,也可以这么理解: 2.54 / 2.54 * 96 = 96pxpx: 不同的 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'这是将屏幕分成一百份,此时 vw 与 rem一样的效果。
也就是说 width:100rem 也可以占满屏幕的宽。
这跟vw 区别是:
rem需要通过js改变html的字体大小,vw是css3自带的。vw只能是分为一百份,rem可以想分多少份都行。rem老,vw新(也不算新了)。(手动狗头)
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
话说像素的大小在物理上是固定的吗