响应式网站应该如何选择CSS单位？

关注

脚本之家

，与百万开发者在一起

出处：code秘密花园（ID：code_mmhy）

如若转载请联系原公众号

在开发需要适配各种设备的响应式网站时，正确了解的 CSS 范围很重要。在做具体的决策之前，我们对它们先分个类：

绝对单位

px - 像素：1px = 1/96th of 1in
pt - 点：1pt = 1/72th of 1in
pc - 十二点活字：1pc = 1/16th of 1in
in - 英寸：1in = 2.54cm = 96px
cm - 厘米：1cm = 96px/2.54
mm - 毫米：1mm = 1/10th of 1cm

百分比单位

百分比 %

相对单位

vw
vh
vmax
vmin

em
rem - 根 em

相对于字体大小
相对于查看端口/文档

下面是一些最常见的单位：

px

绝对像素单位仅用于屏幕（界面），其余单位用于打印。px 单位不是一个好的选择，无论你选择什么屏幕尺寸，px 单位的尺寸都是固定的。这就是为什么边框总是首选 px 单位的原因，因为边框在所有屏幕尺寸上也保持固定。

百分比

用于设置元素的宽度时，它总是相对于其直接父元素的大小。如果没有定义的父级，则默认情况下 body 会被视为父级。

考虑一个宽度为 500px 的盒子，里面有一个 h1 元素：

.box{width:500px;border:1pxsolid crimson;padding:10px;}h1{width:50%;border:1pxsolid;}

如果没有定义父级，那么 root 将被视为默认父级。

em

em总是相对于它的直接父级的字体大小。1em == 父字体大小的大小。如果没有覆盖，默认字体大小为16px，假设在父元素中字体大小为48px，然后在子元素中为1em == 48px。

h1{font-size:1em;/* now 1em == 16px */}

.container{font-size:48px;/* or 3em, because default font-size is 16px& its parent is body so, 3*16px will be 48px */}h1{font-size:1em;/* now 1em == 48px */}

我们可以将这个单元用于边距和填充，因为它可以让我们根据元素的字体大小在框周围使用灵活的间距。因此，元素font-size会根据设备大小而变化，元素周围的间距也将分别发生变化。

rem

r 代表根em，与em不同，它总是相对于根字体大小，无论它的下一个父元素具有什么字体大小。如果根已经重新定义了字体大小，如60px那么1rem == 60px。

html{font-size:60px;}.container{font-size:16px;}h1{font-size:1rem;}

vw

vw代表视口宽度，这意味着vw总是相对于根宽度的1%，与父元素的宽度无关。所以，如果1vw == 1%那么100vw == 100% 视口宽度。

让我们考虑以下示例，其中一个子项的宽度相对于父项的大小，而另一个子项的宽度相对于根。

.container{width:600px;border:2pxsolid black;text-align: center;font-size:20px;}.box1{width:100%;background: skyblue;}.box2{width:70vw;background: pink;}

vh

vh代表viewprot高度，如vw它也相对于根/文档的 1% 高度。

让我们考虑以下示例，其中一个子元素的高度与父级大小有关，而另一个子元素的高度与根相关。

.container{border:2pxsolid;font-size:40px;width:800px;height:400px;display: flex;text-align: center;margin:0auto;}.box1{height:100%;width:50%;background: skyblue;}.box2{height:100vh;background: pink;width:50%;}