css - 关于部分响应边距的一般建议

Question

我正在建立一个响应式网站。它基本上<sections>是堆叠在页面下方的。<H1,H2>被等分手。

我真的想知道设置边距的最佳方法是什么，这样部分和标题就不会显得太近和聚集在一起。我尝试了以下方法：

1. 使用 px 设置边距，然后编写媒体查询以随着屏幕变小进行调整
2. 使用（em）设置边距我在视频上看到了这种方法，甚至推荐吗？
3. 使用 %'s 设置边距。再次不确定这是否是最好的？

我现在到了需要重构我的 CSS 并做出决定的地步。

非常感谢任何帮助。皮特

Answer 1

您必须查看视口元数据：

<meta name="viewport" content="width=device-width, user-scalable=false;">

有关 Mozilla 开发人员的更多信息：https ://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

1. 移动优先媒体查询目前效果最好，因为随着屏幕尺寸变小，您总是可以做的事情越来越少，

很喜欢

media screen and (min-width: 320px) {}
media screen and (min-width: 769px) {}

1. 不要过多地使用 ems，它们是相对于它们的父层的，如果你在级联中走得太深，就不可能追踪到，我相信现在所有浏览器都支持 rem。

   1. % 也许有利于设置宽度，我的意思是我认为屏幕尺寸过大时，边距不必变小或变大，但我认为带有备份 px 设置的 rem 是最好的。