Question

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

如果按比例缩小浏览器窗口，则所有内容都将完全适合，因为所有内容的缩放比例均相同。为此，您必须使用百分比率而不是px率。

现在，我的问题是我是 PX 的人，我的意思是我使用 px 构建所有项目，对使用{{ 1}}等。嗯，我已经使用了其他单位，例如public static bool IsWindows { get { var osver = Environment.OSVersion; return osver.Platform == PlatformID.Win32NT; } }，但我并不经常使用。

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

Answer 1

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

Answer 2

实践确实很完美

简短的答案是...开始练习使用基于百分比的单位，因为这是您学习小技巧的方法。无论如何，这是一个不错的职业举动，因为早在HiDPI屏幕，移动设备等都以不同的方式渲染像素的时候就将像素匹配到设计的想法就被粉碎了。

入门

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

第一

使用rem代替像素。与em相对于其父字体大小有关，Rem与根元素（通常为body）的 font-size 有关，这意味着其GLOBAL。您可以在任何地方使用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列布局设置为300px宽（无响应）。您应该将它们宽100/3 or 33.3333333%。这样的百分比始终基于父级，因此100% = parent's width（与父级的单位无关）。

作为旁注，我很少需要使用vh/vw，不是因为它们没有用，而是总的来说，元素以非常可预测的方式溢出了它们的窗口，并且百分数更容易使您的头脑迷惑。

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

2 个答案:

实践确实很完美

入门

第一

下一个

最后