如何在响应式设计中使用百分比率而不是像素率？
How to work with percentage rates instead of px rates in responsive design?
所以我几个月前申请了一份前端工作并接受了面试，他们给了我一个测试任务。这个任务的要求之一是他们希望网站是无限可变可扩展的like this one。
引用它说的任务描述：
如果您缩小浏览器 window，一切都非常适合，因为一切都以相同的比例缩放。为此，您必须使用百分比率而不是像素率。
现在，我的问题是我是一个 PX 人，我的意思是我使用 px 构建我所有的项目并且没有那么自信关于使用不同的单位，例如 em, vw, rem 等。嗯，我使用过其他单位，例如 vh，但我不经常使用它。
那么最好的学习方法是什么，或者有什么路线图可以帮助我从 px 迁移到百分比。我应该只使用像 px to em 这样的工具吗？
如果需要占屏幕的百分比，vw 和 vh 将是您的最佳选择。 rem 和 em 仍然相对于一个起点（即 body { font-size: 16px; } 并从那里缩放。 vw 和 vh 在较小的设备屏幕上确实有一些问题，但看起来你的演示网站有这个问题。您可以使用媒体查询解决此问题，但它看起来不像您的示例那样，它 "infinitely" 像您提到的那样缩放。
熟能生巧
简短的回答是...开始练习使用基于百分比的单位，因为这将是您学习小知识的方式。无论如何，这是一个很好的职业发展，因为将像素与设计相匹配的想法很久以前就被 HiDPI 屏幕、移动设备等以不同的方式渲染像素粉碎了。
入门
实际上，您需要一个起点，这意味着要学习一些新的 CSS 工具。
第一个
使用rem代替像素。
与相对于其父字体大小的 em 不同，Rem 相对于根元素（通常为 body）的 font-size，这意味着它全球的。你可以在任何地方使用 rems（字体大小、边距、填充、位置等），它们都是基于根大小的。
假设根字体大小为 16px（典型的浏览器默认值）。这意味着 1rem = 16px。现在，当您在脑海中进行数学计算时，16px 的基数并不过分有用。 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 列布局设置为 300 像素宽（非响应式）。您应该使它们 100/3 or 33.3333333% 宽。像这样的百分比始终基于父项，因此 100% = parent's width（无论父项的单位如何）。
作为旁注，我很少需要使用 vh/vw，不是因为它们没有用，而是一般来说，元素以非常可预测的方式溢出它们的 window，并且百分比更容易换行你的头。
所以我几个月前申请了一份前端工作并接受了面试，他们给了我一个测试任务。这个任务的要求之一是他们希望网站是无限可变可扩展的like this one。 引用它说的任务描述：
如果您缩小浏览器 window，一切都非常适合，因为一切都以相同的比例缩放。为此，您必须使用百分比率而不是像素率。
现在，我的问题是我是一个 PX 人，我的意思是我使用 px 构建我所有的项目并且没有那么自信关于使用不同的单位，例如 em, vw, rem 等。嗯，我使用过其他单位，例如 vh，但我不经常使用它。
那么最好的学习方法是什么，或者有什么路线图可以帮助我从 px 迁移到百分比。我应该只使用像 px to em 这样的工具吗？
如果需要占屏幕的百分比，vw 和 vh 将是您的最佳选择。 rem 和 em 仍然相对于一个起点（即 body { font-size: 16px; } 并从那里缩放。 vw 和 vh 在较小的设备屏幕上确实有一些问题，但看起来你的演示网站有这个问题。您可以使用媒体查询解决此问题，但它看起来不像您的示例那样，它 "infinitely" 像您提到的那样缩放。
熟能生巧
简短的回答是...开始练习使用基于百分比的单位，因为这将是您学习小知识的方式。无论如何，这是一个很好的职业发展，因为将像素与设计相匹配的想法很久以前就被 HiDPI 屏幕、移动设备等以不同的方式渲染像素粉碎了。
入门
实际上，您需要一个起点，这意味着要学习一些新的 CSS 工具。
第一个
使用rem代替像素。
与相对于其父字体大小的 em 不同，Rem 相对于根元素（通常为 body）的 font-size，这意味着它全球的。你可以在任何地方使用 rems（字体大小、边距、填充、位置等），它们都是基于根大小的。
假设根字体大小为 16px（典型的浏览器默认值）。这意味着 1rem = 16px。现在，当您在脑海中进行数学计算时，16px 的基数并不过分有用。 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 列布局设置为 300 像素宽（非响应式）。您应该使它们 100/3 or 33.3333333% 宽。像这样的百分比始终基于父项，因此 100% = parent's width（无论父项的单位如何）。
作为旁注，我很少需要使用 vh/vw，不是因为它们没有用，而是一般来说，元素以非常可预测的方式溢出它们的 window，并且百分比更容易换行你的头。