css - 我应该参考哪个单位的宽度以及我应该使用什么单位进行响应式设计？（非自适应设计）

Question

现在我正在处理一个需要我使用响应式设计而不是自适应设计的项目（即没有媒体查询；一切都在流畅地变化），我不确定应该使用哪个单元来填充和边距。

对于字体大小，我使用rem的是 ，我认为这是响应式设计的一个不错的选择，因为我只需要更改font-sizeforhtml即可控制其更改规模。

但是对于填充和边距，至少在我看来，每个单元都有其缺点。

像素

硬编码像素在这里不是一个选项。

雷姆

对我来说，容器的 padding 和 margin 用font-size缩放是没有意义的，但这是响应式设计最容易使用的单位。

大众

如果我使用 vw，容器的填充和边距将随视口宽度缩放。这个单位对我来说很有意义，但我不想通过calc( marginWidth/viewportWidth * 100vw)到处写来获得一个单位相对于视口的比例。有没有更好的写作方式并达到同样的效果？

%

如果我使用 %，容器的填充和边距将随父宽度缩放。再次，我将不得不这样做calc( marginWidth/viewportWidth * 100%)。这真的很麻烦。

有没有更好的方法来为响应式 css 设计设置填充和边距？使用诸如 tailwind css、postCSS 或 Sass 之类的 CSS 处理器是否有助于解决这个问题？欢迎任何意见。

标签： csssasspostcsstailwind-css

Answer 1

这个问题被问了很多，每个人的做法都不一样。您可以使用px, %, em, rem, vw, vh. 除了这些px都是相对单位。这取决于项目，但我确实发现大多数情况下最好使用 px 和百分比，因为您知道它们不会被不同的视口弄乱。使用vh和vw填充和边距对页面缩放方式的可访问性影响很差。

我建议尝试几种不同的方法或两者的组合，因为没有一个正确的答案。