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

在开发需要适配各种设备的响应式网站时，正确了解的 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: 1px solid crimson;
  padding: 10px;
}
h1{
  width: 50%;
  border: 1px solid;
}

如果没有定义父级，那么 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
& it's 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: 2px solid black;
  text-align: center;
  font-size: 20px;
}
.box1{
  width: 100%;
  background: skyblue;
}
.box2{
  width: 70vw;
  background: pink;
}

vh

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

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

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

总结

• px：边框的像素单位。
• % 相对于父级的宽度单位。
• 相对于元素字体大小的边距和填充的 em 单位。
• 相对于根的字体大小的 rem 单位。
• vw 和 vh 表示相对于根的宽度和高度。

上面六种就是在响应式网站中最常用的五个单位，它们分别适用与不同的场景，通常我们需要组合使用。

抖音前端正急缺人才，如果你想加入我们，欢迎加我微信和我联系。另外如果你想加入前端、面试、理财等交流群，或者你有任何其他事情想和我交流也可以添加我的个人微信 ConardLi 。

文中如有错误，欢迎在后台和我留言，如果这篇文章帮助到了你，欢迎点赞、在看和关注。你的点赞、在看和关注是对我最大的支持！

点赞、在看支持作者❤️