所以我几个月前申请了一份前端工作并接受了面试，他们给了我一个测试任务。这项任务的要求之一是他们希望网站像这样无限可变地可扩展。 引用任务描述，它说：
如果缩小浏览器窗口，则所有内容都完美契合，因为所有内容都以相同的比例缩放。为此，您必须使用百分比率而不是 px 率。
现在，我的问题是我是一个PX人，我的意思是我使用px构建我的所有项目，并且对使用不同的单元(如em, vw, rem等(没有信心。好吧，我使用过其他单元，例如vh但我不经常使用它。
那么最好的学习方法或任何可以帮助我从 px 迁移到百分比的路线图是什么。我应该只使用 px 之类的工具来执行它们吗？
熟能生巧
简短的回答是...开始练习使用基于百分比的单位，因为这就是您学习小渔获物的方式。无论如何，这是一个很好的职业举动，因为将像素与设计相匹配的想法很久以前就被 HiDPI 屏幕、移动设备等以不同的方式渲染像素所粉碎。
开始
实际上，你需要一个开始的地方，这意味着学习一些新的CSS工具。
第一
使用rem代替像素。 与相对于其父字体大小的em不同，Rem 相对于根元素的字体大小(通常为body(，这意味着它的全局。你可以在任何地方使用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 or 33.3333333%宽。像这样的百分比总是基于父级，所以100% = parent's width(无论父级的单位如何(。
作为旁注，我很少需要使用vh/vw，不是因为它们没有用，而是一般来说，元素以非常可预测的方式溢出它们的窗口，并且百分比更容易缠绕你的头脑。
如果需要占屏幕的百分比，大众和VH将是你最好的选择。 rem 和 em 仍然相对于一个起点(即 body { font-size： 16px; } 并从那里缩放。 大众和VH在较小的设备屏幕上确实存在一些问题，但看起来您的演示网站存在此问题。 您可以使用媒体查询来解决此问题，但它看起来不像您的示例，它"无限"缩放，如您所提到的。