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 上给出的答案，它很好地解释了百分比属性：/sf/answers/2172273421/

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

1. 像素是固定的。它们不适应不同的屏幕尺寸或视口、缩放或布局。由于移动优先是一种转到模式，而响应式网页设计依赖于适应性单元，并且由于像素是可以避免的，因此 - 避免它们。
2. 高分辨率屏幕正变得越来越主流，如果您不想适应更多媒体查询（对于较大的屏幕），则不应使用像素。
3. 还有更好、更有活力的替代方案。这些包括vw、、、当然。vh​emrem%

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

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

vw是vh多面手 - 我个人不会在特定情况下使用它们，但有时它们非常方便。最好的例子是覆盖整个视口。

所有这些单位都是动态的并且取决于视口。这很棒，因为这样可以实现灵活的样式。像素则不然。