如何在响应式设计中使用百分比率而不是 px 率？答案

【问题标题】：How to work with percentage rates instead of px rates in responsive design?如何在响应式设计中使用百分比率而不是 px 率？
【发布时间】：2020-01-02 20:19:23
【问题描述】：

所以几个月前我申请了前端工作并接受了面试，他们给了我一个测试任务。这项任务的要求之一是他们希望网站可以无限可变地扩展like this one。引用它说的任务描述：

如果您缩小浏览器窗口，一切都会完美契合，因为一切都以相同的比例缩放。为此，您必须使用百分比率而不是 px 率。

现在，我的问题是我是一个 PX 人，我的意思是我使用 px 构建我的所有项目，并且对使用不同的单位（例如 @987654323）没有那么自信@ 等。嗯，我用过其他单位，比如vh，但我不经常使用它。

那么，什么是最好的学习方式或任何可以帮助我从 px 迁移到百分比的路线图。我应该只使用px to em 之类的工具吗？

【问题讨论】：

尝试在任何地方使用vw 和vh，有时您会发现它在移动设备上看起来不太好。如果是这种情况，您可以使用媒体查询来解决此问题。要了解，您应该尝试将您已经创建的站点之一更改为 vh 和 vw 单位。

标签： css responsive-design frontend

【解决方案1】：

vw 和 vh 如果需要占屏幕的百分比，将是您的最佳选择。 rem 和 em 仍然相对于起点（即 body { font-size: 16px; } 并从那里缩放。vw 和 vh 在较小的设备屏幕上确实存在一些问题，但看起来您的演示网站有这个问题。您可以使用媒体查询来解决此问题，但它看起来不像您的示例那样，它“无限”地扩展，正如您提到的那样。

【讨论】：

【解决方案2】：

熟能生巧

简短的回答是...开始练习使用基于百分比的单位，因为这就是您学习小技巧的方法。无论如何，这是一个很好的职业发展方向，因为将像素与设计相匹配的想法很久以前就被 HiDPI 屏幕、移动设备等以不同方式呈现像素的想法打破了。

开始

实际上，您需要一个起点，这意味着学习一些新的 CSS 工具。

首先

使用rem 代替像素。与相对于其父字体大小的em 不同，Rem 相对于根元素（通常为body）的font-size，这意味着它的全局。您可以在任何地方使用 rems（字体大小、边距、填充、位置等），它们都基于根大小。

假设根字体大小为 16 像素（典型的浏览器默认值）。这意味着1rem = 16px。现在，当您在脑海中进行数学运算时，16 像素的底数并不太有用。 Jonathan Snook 几年前写过关于 why this works 的文章，但基本公式将基本字体大小设置为 62.5%（16 像素），这意味着 1rem = 10px 更容易计算。

这是代码中的样子：

body {
  font-size: 62.5%;
}

h1 {
 font-size: 2.4rem;
 /* 2.4rem = 24px */
}

p {
 font-size: 1.2rem;
 /* 1.2rem = 12px */
}

.padding-left {
 padding-left: 2rem;
 /* 2rem = 20px */
}

你懂的……

有趣的提示：一旦你喜欢布局，你就可以改变正文的字体大小，让一切变得更大或更小。这对于您希望字体更大一点的小屏幕之类的东西很有用

下一步

CSS Calc()是你的朋友。它旨在帮助您对混合单位值进行数学运算。例如，浏览器可以进行这种类型的数学运算：33.33% - 200px。

.element {
   width: calc(33.33% - 20px);
   /* maybe you need responsive columns with 10 px of padding on either side */
}

终于

开始以百分比进行所有布局。例如，而不是将 3 列布局设置为 300px 宽（不响应）。您应该将它们设为100/3 or 33.3333333% 宽。像这样的百分比总是基于父级，所以100% = parent's width（不管父级的单位）。

作为旁注，我很少需要使用vh/vw，不是因为它们没有用，而是一般来说，元素以非常可预测的方式溢出它们的窗口，并且百分比更容易让你理解。

【讨论】：