CSS 百分比和像素

Question

我喜欢认为自己有一些严重的 CSS 招摇（我也是一个 PHP hack，并且非常擅长 Javascript），但是今天我正在和一位设计师聊一个具体的情况，老实说我只是不知道答案。我希望有人能详细说明这个问题。

场景：

我听到很多人说，“哦，因为响应式设计，我对所有内容都使用百分比”，但是你去看看他们的 css，他们在所有地方都使用 px 作为边距、填充等。

我的问题是我应该使用像素吗？我想说，我理解这一点的主要痛点是高分辨率屏幕。

例如，我正在创建一个非常简单的“英雄”，其中我将容器的高度设置为 700 像素高，并带有背景图像和一些文本，同时将其宽度设置为 100%。在我创建它的屏幕上，它显示了我的屏幕的全高（这是我的意图），但是当我让其他人在更高分辨率的笔记本电脑屏幕上查看它时，图片的高度明显更短，下面有空白它，未能填满屏幕的整个高度。

我正在找人解释像素值如何在更高分辨率的屏幕上受到影响，以及是否应该始终使用百分比。

例如，如果我在“正常”分辨率屏幕上将一个容器设置为 300 像素宽，那么同一个容器在更高分辨率的屏幕上会不会是 150 像素宽，并且看起来会缩小和可怕？

假设我开始使用百分比来表示边距和填充，我很好奇 css 是如何计算的？例如，假设我有一个联系表单，其中有许多输入堆叠在彼此之上，我会执行以下操作：

input {
  margin-bottom: 2.5%;
}

css 是从哪里计算 2.5% 的？它是不是说：“将底部边距设为其父级高度的 2.5%？我只是对它的基础感到困惑。

非常感谢任何输入。谢谢。

Answer 1

首先，我想参考 SO 上给出的一个答案，它很好地解释了百分比属性：https://stackoverflow.com/a/31032477/4459695

那么我应该使用像素吗？
在现代网页设计中确实应该避免使用像素，原因很简单：

1. 像素是固定的。它们不适应不同的屏幕尺寸或视口、缩放或布局。由于移动优先是一种 goto 模式，响应式网页设计依赖于自适应单元，而且由于像素是可以避免的，所以 - 避免使用它们。
2. 高分辨率屏幕越来越成为主流，如果您不想适应更多的媒体查询（对于更大的屏幕），则不应使用像素。
3. 有更好、更动态的替代方案。其中包括vw、vh、em、rem，当然还有%。

但是什么时候使用哪个单位呢？
em 和rem 非常适合字体大小或类似的东西。它们很容易缩放，也可以用于边距和填充，具体取决于内容大小。

% 最好用于相对对象定位，而不是用于边距、填充或字体大小，尽管它们可以（我猜边距和填充都可以）。我的意思是，百分比在与width、height 或类似的东西结合使用时效果最好（例如，它们在弹性布局中效果很好）。

vw 和 vh 是多面手——我个人不会在特定情况下使用它们，但它们有时非常方便。最好的例子是应该填满整个视口的叠加层。

所有这些单位都是动态的并且依赖于视口。这很棒，因为这允许灵活的样式。像素没有。

Answer 2

边距和内边距的百分比值始终是父级宽度的百分比。

假设你有一个<div> 和margin-bottom: 25%;，在另一个<div> 内，宽度为1000px，那么<div> 的下边距是1000*25% = 250px。

.container {
  width: 100px;
  background: green;
}

.child25,
.child45,
.child-none{
  background: yellow;
}

.child25 {
  margin-bottom: 25%;
}

.child45 {
  margin-bottom: 45%;
}

<div class="container">
  <div class="child25">This one should have 25px margin bottom.</div>
  <div class="child45">This one should have 45px margin bottom.</div>
  <div class="child-none">This one has no margin</div>
</div>

至于你的英雄问题，如果你想让英雄的高度是全屏的高度，使用height: 100vh;，这意味着100%的视口高度。

700px 高度的元素在任何屏幕上总是是 700px 高。实际感知尺寸的不同是因为屏幕的ppi（每英寸像素）或dpi（每英寸点数），因为它们通常在移动设备上调用。该值是指填充该屏幕上每一英寸的像素/点的数量。