做响应式设计时，首选单位是什么？ [英] What's the preferred unit when doing responsive design?

问题描述

我正在建立一个自适应网站，我在想什么单元我应该使用？我看到很多网站使用像素（px）进行测量，我看到一些使用百分比（％）。是否有优先或正确的方式做响应式设计？

我发现百分比很难使用，因为它使计算变得困难，我最终得到的值为2.754％等等，当设置宽度/边距像素似乎更容易，它只是简单的加法和减法，但我已经读到，它不是未来证明或类似的东西，如果用户放大浏览器窗口不适当缩放。这是否真的吗？

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

谢谢！

解决方案>

对于布局键入像框大小的内容，您要使用％，因为您通常会将多个列的大小设置为百分比的父对象在某个断点（ width：100％）上堆叠在一起。没有其他单元将允许您填充100％的空间，如％。

/ margins 使用 em ，通常你会想要相对于文本的大小来放置你的元素。使用 em （使用M字符），你可以很容易地说，我想要大约1个字符间距。

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

使用 em （或％），使用 em 通过父母给孩子，它只是一个更好的单位与 px 。

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?

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?

If you have any experience or expertise, please share! I would love to hear what you guys have to say!

Thanks!

解决方案

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.

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.

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.

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.

这篇关于做响应式设计时，首选单位是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！