当填充/边距妨碍小屏幕上的内容时，你会怎么做？

Question

我了解其他问题以各种形式涉及该主题，但没有一个像我希望的那样直接得到明确的答案。

在构建视图时，内边距和边距在您所期望的所有方面都很有用。当您阅读本页时，想象一下，如果与周围元素的所有间距都被折叠以便将所有内容挤在一起，那么导航会变得多么困难。

当我设计视图时，我经常会在文本框中添加10px 填充，或者使用5px 边距分隔按钮。但是在小分辨率显示器上和（等效地）在那些具有小device pixel ratio 设置的显示器上（通常是手机和笔记本电脑，其中 CSS 像素被缩放以使网页可用，或者浏览器用户按下 ctrl +），填充/边距占用追求使网页小型设备友好的有价值的房地产。

如果屏幕分辨率受到限制，或者设备像素比被强烈缩放，10px 填充将占据屏幕的百分比，而不是在桌面上。本应是一个小的逻辑分离变成了一堵大墙。那么如何保持小填充/边框呢？

如果可以使填充/边距响应式，这样就不会占用太多屏幕，那就太好了。但是 CSS 中的单位与其物理长度不对应，百分比会根据参考元素产生不同的值，媒体查询会很麻烦，而且视口 CSS 单位也有限制。

Answer 1

它们是你可以在 px 旁边使用的一堆其他单位：

1. em：相对于元素的字体大小（在现代网页设计中经常使用）
2. ex: 相对于当前字体的x-height
3. ch：相对于“0”的宽度
4. rem：相对于根元素的字体大小（也很常见......）
5. vw：相对于视口宽度的 1%
6. vh：相对于视口高度的 1%（此处相同）
7. %: 相对于父元素

还有更多......我想如果我记得的话，Bootstrap 是基于 em 的。 所以回到你的问题，你可以有一个动态的字体大小和一个基于em的动态填充和边距系统。希望这有帮助。 GL.