做响应式设计时首选的单位是什么？答案

【问题标题】：What's the preferred unit when doing responsive design?做响应式设计时首选的单位是什么？
【发布时间】：2013-03-28 21:00:47
【问题描述】：

我正在构建一个响应式网站，我想知道我应该使用什么单位？我见过很多使用像素 (px) 进行测量的网站，也看到过一些使用百分比 (%) 的网站。是否有首选或正确的响应式设计方式？

我发现百分比很难使用，因为它使计算变得困难，并且在设置宽度/边距等时我最终得到了 2.754% 等值。像素似乎更容易，它只是简单的加法和减法，但我读过它不是“面向未来的”或类似的东西，如果用户放大浏览器窗口，也不会正确缩放。这仍然是真的吗？

如果您有任何经验或专业知识，请分享！我很想听听你们的意见！

谢谢！

【问题讨论】：

Responsive 和 absolute values（如像素）有点矛盾。大多数情况下，对普通属性使用相对值（width）和对最小值/最大值使用绝对值（max-width、min-width）更容易。这样它仍然保持响应，但您可以对样式容器的宽度做出一些假设。
见this question
我认为答案大多是正确的。无论如何，CSS中有很多单位。请参阅 Chris Coyier 的这篇文章：css-tricks.com/the-lengths-of-css

标签： html css

【解决方案1】：

对于布局，vh 和 vw 很好，因为它们与设备的视口相关。它们使您可以在设计时考虑到设备的视口。说了这么多，你就知道什么会显示在窗口上，什么不会，如果不小心的话。

对于文本 em 是最好的，因为它是响应式功能。

【讨论】：

【解决方案2】：

当然你必须使用百分比。但是使用min-height、max-height、min-width、max-width CSS 键。

为了下一代

vw 和 vh。 vw 是窗口宽度的 1/100，vh 是窗口高度的 1/100。对于响应能力，他们将成为新的单位。

【讨论】：

是的，我认为它们确实可以在一些浏览器中工作，但还没有准备好进行非实验性开发：P

【解决方案3】：

对于 layout 输入框的大小等内容，您希望使用 %，因为您通常会有几列按其父级的百分比大小排列，它们将在彼此顶部堆叠某个断点（width:100%）。没有其他单位可以像 % 那样让您填满 100% 的空间。

padding/margins 使用em，通常您会希望相对于文本大小来分隔元素。使用em（带有'M'字符）你可以很容易地说我想要大约1个字符间距。

对于borders，您可以使用px 或em，但还是有区别的。如果您希望您的边框在所有设备上看起来都是一个像素宽，请使用1px。它可能不是所有设备上的一个像素，但是，例如高密度显示器会将1px 转换为2px。如果您希望边框的大小基于您的字体，请使用em。

对于字体，使用em（或%），em 的使用将父母传递给孩子，它只是一个更好的单位，与px 一起工作。

【讨论】：

这与一套规则相差甚远。这个答案是一个很好的指南，但在很多情况下使用其他单位可以更好地工作
对于边框，您也可以使用thin、medium 和thick。它们对应于1px、3px 和5px，但也可以根据您的缩放等进行缩放。它们也比em 更好，因为用em 定义的边框在您缩小时会消失并且其宽度变得小于1px。

【解决方案4】：

使用百分比以及最小宽度和最大宽度（以像素为单位）。这会阻止百分比使您的 div 太小或太大。例如

div {
    width:100%; //full width of browser
    max-width: 960px; //this means it will be 100% of the browser until 960px then it will stop expanding
}

【讨论】：