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. 像素是固定的。它们不适应不同的屏幕尺寸或视口(viewport)、缩放比例或布局。由于移动优先是一个 goto 模式，响应式网页设计依赖于自适应单元，并且由于像素是可以避免的，所以请避免使用它们。
2. 高分辨率屏幕正变得越来越主流，如果您不想适应更多的媒体查询(对于更大的屏幕)，则不应使用像素。
3. 有更好、更动态的替代方案。这些包括 vw、vh、em、rem，当然还有 %。

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

% 最好用于相对对象定位，而不是用于边距、填充或字体大小，尽管它们可以(我猜边距和填充没问题)。我的意思是当百分比与 width、height 或类似的东西组合时效果最好(例如，它们在 flex-layouts 中效果很好)。

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

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