35

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

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

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

谢谢！

4

4 回答 4

48

对于布局类型，例如盒子的大小，您希望使用这些内容，因为您通常会有几列按其父级的百分比进行大小调整，这些列将在某个断点 ( )%处相互堆叠。width:100%没有其他单位可以让您像这样填充 100% 的空间%。

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

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

对于字体使用em（或%），使用em通过父母传递给孩子，它只是一个更好的单位来使用 over px。

于 2013-04-06T12:41:08.390 回答
11

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

为下一代

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

于 2013-04-06T12:40:02.960 回答
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
}
于 2013-04-06T12:37:13.360 回答
0

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

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

于 2018-07-03T11:22:05.217 回答