我正在建立一个响应式网站，我想知道我应该使用哪个单元？我已经看到很多网站使用像素（px）进行测量，我看到一些使用百分比（％）。是否有首选或正确的方式进行响应式设计？
我发现百分比难以使用，因为它使计算变得困难，并且在设置宽度/边距等时我最终得到了2.754％等值。像素似乎更容易，它只是简单的加法和减法，但我已经读过，它不是“未来证据”或类似的东西，如果用户放大浏览器窗口，将无法正确缩放。这仍然是真的吗？
如果您有任何经验或专业知识，请分享！我很想听听你们要说些什么！
谢谢！
答案 0 :(得分：36)
对于布局类似框大小的内容，您希望使用%，因为您通常会将多个列的大小设置为其父级的百分比，这些列将叠加在每个列的顶部其他在某个断点（width:100%）。没有其他单位允许您填充100％的空间，如%。
对于填充/边距使用em，通常您需要将元素相对于文本大小分隔开来。使用em（带有'M'字符），您可以很容易地说我想要大约1个字符间距。
对于边框，您可以使用px或em，但有一些区别。如果您希望边框在所有设备上看起来像一个像素宽，请使用1px。它可能不是所有设备上的一个像素，但高密度显示会将1px转换为2px。如果您希望边框的大小取决于您的字体，请使用em。
对于字体使用em（或%），使用em会将父母带到孩子身边，而且只是一个更好的单位可以使用px。
答案 1 :(得分：10)
当然你必须使用百分比。但使用min-height，max-height，min-width，max-width个CSS密钥。
下一代
vw 和 vh 。 vw是窗口宽度的1/100，vh是窗口高度的1/100。 为了响应，他们将成为新单位。
答案 2 :(得分：5)
使用百分比以及最小宽度和最大宽度（以像素为单位）。这会停止百分比，使您的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
}
答案 3 :(得分：0)
对于布局vh和vw来说是很好的，因为它们相对于设备的查看端口。它们使您可以根据设备的视口进行设计。这样说，您就会知道窗口上将显示什么，如果不小心的话将不会显示。
对于文本em来说是最好的，因为它具有响应功能。