Css 如何在响应性设计中使用百分比率而不是px率？

几个月前我申请了一份前端工作，接受了面试，他们给了我一个测试任务。此任务的一个要求是，他们希望网站具有无限可变的可伸缩性。 引用任务描述，它说：

如果缩小浏览器窗口，所有内容都会完美匹配，因为所有内容都以相同的比例缩放。为此，您必须使用百分比率，而不是px率。

现在，我的问题是我是一个PX的家伙，我的意思是我用PX来构建我的所有项目，并且对使用不同的单元没有信心，比如

em、vw、rem

等。我也使用过其他单元，比如

vh

，但我不经常使用它

---

那么，什么是最好的学习方法，什么是帮助我从px迁移到percentage的路线图呢。我是否应该只使用像这样的工具？

如果需要占屏幕的百分比，大众和vh将是您的最佳选择。rem和em仍然是相对于一个起点（即body{font size:16px；}并从那里开始缩放。虽然vw和vh在较小的设备屏幕上确实存在一些问题，但您的演示网站似乎存在这个问题。您可以通过媒体查询来解决这个问题，但它不像您的示例那样，而是“无限地”正如你所提到的那样。熟能生巧 简单的回答是…开始练习使用基于百分比的单位，因为这是学习小技巧的方式。无论如何，这是一个很好的职业发展，因为将像素与设计匹配的想法很久以前就被HiDPI屏幕、移动设备等打破了，所有这些设备都以不同的方式渲染像素

开始 实际上，您需要一个开始的地方，这意味着学习一些新的CSS工具

弗斯特 使用

rem

替代像素。 与相对于其父字体大小的

em

不同，Rem是相对于根元素（通常是

body

）的font size，这意味着它是全局的。您可以在任何地方使用rems（字体大小、边距、填充、位置等），它们都基于根大小

假设根字体大小为16px（典型的浏览器默认值）。这意味着

1rem=16px

。现在，当你在头脑中做数学运算时，16px的基数并没有太大用处。乔纳森·斯努克（Jonathan Snook）在几年前写过，但基本公式是将基数字体大小设置为62.5%（16px）这意味着

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或33.3333333%

宽。这样的百分比始终基于父级，因此

100%=父级的宽度

（不考虑父级的单位）

---

作为旁注，我很少需要使用

vh/vw

，不是因为它们没有用处，而是一般来说，元素以非常可预测的方式溢出其窗口，百分比更容易让你感到头晕。

尝试在任何地方使用

vw

和

vh

，有时你会发现它在移动设备上看起来不太好在这种情况下，您可以使用媒体查询来解决此问题。要了解这一点，您应该尝试将您准备好的一个站点更改为

vh

和

vw

单元。