I'm building a responsive website and I'm wondering what unit I should use? I've seen a lot of sites using pixels (px) for measurements and I've seen some using percent (%). Is there a preferred — or right — way of doing responsive design?
我正在建立一个响应性很强的网站，我想知道我应该使用哪个单元?我见过很多使用像素(px)进行测量的网站，也见过使用百分比(%)的网站。是否有一种更好或更正确的方式来进行响应性设计?
I've found percent to be hard to use, since it makes calculations hard and I've ended up with values like 2.754% and so on when setting widths/margins etc. Pixels seems easier, it's just simple addition and subtraction, but I've read that it isn't "future proof" or something like that and wont scale properly if the user zooms in the browser window. Is that still true?
我发现百分比很难使用,因为它使得计算困难,我最终值2.754%等等,当设置宽度/利润等。像素似乎更容易,它只是简单的加法和减法,但我读过,它不是“未来证明”或类似的东西,不会规模适当如果用户缩放浏览器窗口。这还是真的吗?
If you have any experience or expertise, please share! I would love to hear what you guys have to say!
如果你有任何经验或专长，请分享!我很想听听你们的意见!
Thanks!
谢谢!
3 个解决方案
#1
30
For layout type things like the sizes of boxes, you want to use % because you will typically have several columns sized as a percentage of their parent that will stack on top of each other at a certain breakpoint (width:100%). No other unit will allow you to fill 100% of the space like % does.
对于布局类型的东西，比如盒子的大小，您希望使用%，因为您通常有几个列的大小是它们的父列的百分比，它们将在一个特定的断点(宽度:100%)上堆叠在一起。没有其他单位会允许你填满百分之百的空间像%那样。
For padding/margins use em, normally you will want to space your elements out relative to the size of your text. With em (the with of an 'M' character) you can quite easily say I want approximately 1 character spacing here.
对于填充/边距使用em，通常需要根据文本的大小将元素分隔出来。有了em(带有“M”字符)，你可以很容易地说，我想要大约1个字符间距。
For borders you can use px or em, there is a difference though. If you want your border to look like it's one pixel wide on all devices, use 1px. It may not be one pixel on all devices however, high density displays convert 1px into 2px for example. If you want your border to be a size based on your font, use em.
对于边界，你可以使用px或em，但是有区别。如果你想让你的边框看起来像一个像素宽的设备，使用1px。它可能不是所有设备上的一个像素，但高密度显示将1px转换为2px。如果你想让你的边框根据你的字体大小，使用em。
For fonts use em (or %), the use of em carries through parents to children and it just a nicer unit to work with over px.
对于使用em(或%)的字体，em的使用可以通过父母传递给孩子，而它只是一个更好的单位来处理px。
#2
9
Of course you must use percentage. But with the min-height, max-height, min-width, max-width CSS keys.
当然你必须用百分数。但是有最小高度，最大高度，最小宽度，最大宽度CSS键。
For the next generation
为下一代
vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height. For responsiveness they are going to be the new units.
大众和vh。vw是窗口宽度的1/100,vh是窗口高度的1/100。对于响应性，它们将是新的单位。
#3
4
Use percentages along with min-width and max-width in pixels. This stops percentages making your divs too small or too large. eg
使用百分比、最小宽度和最大宽度(以像素为单位)。这样就不会出现百分比过小或过大的情况。如
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
}
#1
30
For layout type things like the sizes of boxes, you want to use % because you will typically have several columns sized as a percentage of their parent that will stack on top of each other at a certain breakpoint (width:100%). No other unit will allow you to fill 100% of the space like % does.
对于布局类型的东西，比如盒子的大小，您希望使用%，因为您通常有几个列的大小是它们的父列的百分比，它们将在一个特定的断点(宽度:100%)上堆叠在一起。没有其他单位会允许你填满百分之百的空间像%那样。
For padding/margins use em, normally you will want to space your elements out relative to the size of your text. With em (the with of an 'M' character) you can quite easily say I want approximately 1 character spacing here.
对于填充/边距使用em，通常需要根据文本的大小将元素分隔出来。有了em(带有“M”字符)，你可以很容易地说，我想要大约1个字符间距。
For borders you can use px or em, there is a difference though. If you want your border to look like it's one pixel wide on all devices, use 1px. It may not be one pixel on all devices however, high density displays convert 1px into 2px for example. If you want your border to be a size based on your font, use em.
对于边界，你可以使用px或em，但是有区别。如果你想让你的边框看起来像一个像素宽的设备，使用1px。它可能不是所有设备上的一个像素，但高密度显示将1px转换为2px。如果你想让你的边框根据你的字体大小，使用em。
For fonts use em (or %), the use of em carries through parents to children and it just a nicer unit to work with over px.
对于使用em(或%)的字体，em的使用可以通过父母传递给孩子，而它只是一个更好的单位来处理px。
#2
9
Of course you must use percentage. But with the min-height, max-height, min-width, max-width CSS keys.
当然你必须用百分数。但是有最小高度，最大高度，最小宽度，最大宽度CSS键。
For the next generation
为下一代
vw and vh. The vw is 1/100th of the window's width and the vh is 1/100th of the window's height. For responsiveness they are going to be the new units.
大众和vh。vw是窗口宽度的1/100,vh是窗口高度的1/100。对于响应性，它们将是新的单位。
#3
4
Use percentages along with min-width and max-width in pixels. This stops percentages making your divs too small or too large. eg
使用百分比、最小宽度和最大宽度(以像素为单位)。这样就不会出现百分比过小或过大的情况。如
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
}