CSS 百分比和像素

Posted 2023-03-06

【中文标题】CSS 百分比和像素

【英文标题】：CSS Percentages And Pixels

【发布时间】：2017-07-14 13:47:58

【问题描述】：

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

场景：

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

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

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

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

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

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

input 
  margin-bottom: 2.5%;

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

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

【问题讨论】：

垂直内边距和边距是根据父级宽度计算的 :) w3.org/TR/CSS2/box.html#margin-properties

我的意思是用百分比来评论那些 2.5% :)

【参考方案1】：

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

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

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

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

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

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

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

【讨论】：

非常周到、详细的回复。我特别喜欢关于 ems、rems 等的额外添加。我将另一个答案标记为正确，就像它提供了关于我正在经历的特定场景的更多细节。感谢您的帮助。

【参考方案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（每英寸点数），因为它们通常在移动设备上调用。该值是指填充该屏幕上每一英寸的像素/点的数量。

【讨论】：

是的，你是对的，谢谢！我想我会将它们更改为div 以避免混淆，因为它与主要问题并没有真正的关系xD

感谢您的简洁回复。感谢你们的回复。