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

Posted 2023-03-06

【中文标题】我应该参考哪个单位的宽度以及我应该使用啥单位进行响应式设计？ （非自适应设计）

【英文标题】：Which unit's width should I reference to and what unit should I use for responsive design? (Not adaptive design)我应该参考哪个单位的宽度以及我应该使用什么单位进行响应式设计？ （非自适应设计）

【发布时间】：2020-11-20 22:27:33

【问题描述】：

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

对于字体大小，我使用rem，我认为这是响应式设计的不错选择，因为我只需将font-size 更改为html 即可控制它们的更改规模。

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

像素

这里不能选择硬编码像素。

雷姆

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

大众

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

%

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

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

【参考方案1】：

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

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

【讨论】：

使用 vh 和 vw 进行填充和边距可能会影响页面缩放的可访问性。你的意思是当视口改变时它们会渲染极值？