如何通过CSS变量实现响应式的间距系统？-css教程-PHP中文网

直接写 margin: 16px 不适合响应式项目，因其无法随屏幕变化调整、易导致布局错乱且难以协同计算；应使用带语义的 css 变量（如 --spacing-between-cards）配合媒体查询动态重设，并通过 calc() 抵消多余间距、box-sizing: border-box 避免尺寸冲突。

如何通过css变量实现响应式的间距系统？

为什么直接写 `margin: 16px` 不适合响应式项目

它在小屏上挤、大屏上空，改一处得全局搜替换；更麻烦的是，它无法和列数、padding、border 协同计算。比如三列网格要留出总 gap，硬写 margin-right: 16px 会导致末项多出 16px 空隙，还容易和父容器边距塌陷叠加。

`--spacing-md` 这类变量必须在 `@media` 里重设才生效

只在 :root 里定义 --spacing-md: 16px，所有屏幕都用 16px——变量不会自己响应屏幕变化。真正起效的是在媒体查询中显式覆盖：

:root { --spacing-md: 12px; }
@media (min-width: 768px) {
  :root { --spacing-md: 16px; }
}
@media (min-width: 1200px) {
  :root { --spacing-md: 20px; }
}

移动端优先：先设小值，再逐层加大
变量名带语义（如 --spacing-between-cards）比 --margin-sm 更易维护
所有值统一用 px，别混 rem 或 em，否则响应行为不可控

用 `calc(var(--gap) * -1)` 抵消首尾多余间距

gap 属性虽干净，但老 Safari 和部分 Chrome 版本不支持 gap: var(--gap)；而直接给子项写 margin-right: var(--gap) 会让末项多出一格空隙。稳妥做法是把 --gap 定义在父容器，并用 calc() 主动抵消：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

.card-list {
  --gap: 16px;
}
.card-list > * {
  margin-right: calc(var(--gap) * -1);
}
.card-list > :first-child {
  margin-left: 0;
}
.card-list > :last-child {
  margin-right: 0;
}