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

Question

我正在建立一个响应式网站,我想知道我应该使用哪个单元？我已经看到很多网站使用像素(px)进行测量,我看到一些使用百分比(%).是否有首选或正确的方式进行响应式设计？

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

如果您有任何经验或专业知识,请分享!我很想听听你们有什么要说的!

谢谢!

Answer 1

对于布局类型的东西,比如盒子的大小,你想要使用,%因为你通常会有几个列的大小,它们的父级的百分比将在某个断点处叠加在一起(width:100%).没有其他单位可以让你像%这样填补100%的空间.

对于填充/边距使用em,通常您需要相对于文本的大小来分隔元素.使用em(带有'M'字符)你可以很容易地说我想要大约1个字符间距.

对于你可以使用的边界,px或者em,虽然有区别.如果您希望边框在所有设备上看起来像一个像素宽,请使用1px.它可能不是所有设备上的一个像素,但是高密度显示器转换1px成2px例如.如果您希望边框的大小基于您的字体,请使用em.

对于字体使用em(或%),使用em父母带给孩子,它只是一个更好的单位来处理px.

Answer 2

当然你必须使用百分比.但随着min-height,max-height,min-width,max-widthCSS键.

对于下一代

vw和vh.vw是窗口宽度的1/100,vh是窗口高度的1/100.为了响应,他们将成为新单位.

Answer 3

使用百分比以及最小宽度和最大宽度（以像素为单位）。这会停止使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
}