如何确定响应式网站的 CSS 单元？

当要创建一个响应式网站以适应每种设备时，了解正确的CSS 单位非常重要。但在深入决策之前，让我们先对它们进行分类，了解它们的类别。

1. 绝对单位
   • px - 像素
   • pt - 点
   • 电脑 - Picas
   • in - 英寸
   • cm - 厘米
   • mm - 毫米
2. 百分比单位
   • 百分比 % 单位
3. 相对单位
   • 相对于字体大小
     • 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;
}

👉如果没有定义父级，则根将被视为默认父级。

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 */
}

我们可以将此单位用于边距和填充，因为它允许我们根据元素的字体大小灵活地在框周围使用间距。因此，元素的字体大小会根据设备尺寸而变化，因此元素周围的间距也会相应变化。

rem 单位

r 代表根 em，与 em 不同，它始终相对于根字体大小，而不管其下一个父元素的字体大小如何。如果根已重新定义字体大小，如 60px，则子元素中的 1rem == 60px。

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

大众单位

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 表示相对于根的宽度和高度。

这是 6 个 css 单元，它们是最常用的，可以使网站具有响应能力。

希望我能以某种方式帮助你理解这些概念。非常感谢你的反馈👏

我很乐意在LinkedIn上与前端开发人员联系