使用px字号的Divi WordPress站点如何无需大量media queries实现响应式设计

完全可以实现，且不需要编写超过5条媒体查询，以下是可落地的3种方案：

• 方案1：复用Divi通用类名，用少量断点批量定义字号
  Divi全站元素都有统一的公共类名，你只需要按主流设备断点写3-4组媒体查询，就能覆盖所有文字元素的响应式规则，代码示例如下：

/* 桌面端默认样式 */
.et_pb_text_inner { font-size: 16px; }
h1.et_pb_title { font-size: 48px; }
.et_pb_button { font-size: 14px; }

/* 平板横屏断点 */
@media (max-width: 1199px) {
  .et_pb_text_inner { font-size: 15px; }
  h1.et_pb_title { font-size: 42px; }
  .et_pb_button { font-size: 13px; }
}

/* 平板竖屏断点 */
@media (max-width: 991px) {
  .et_pb_text_inner { font-size: 14px; }
  h1.et_pb_title { font-size: 36px; }
  .et_pb_button { font-size: 13px; }
}

/* 手机端断点 */
@media (max-width: 767px) {
  .et_pb_text_inner { font-size: 13px; }
  h1.et_pb_title { font-size: 28px; }
  .et_pb_button { font-size: 12px; }
}

该方案仅用到3条媒体查询，所有字号均为px单位，符合要求。

• 方案2：零代码使用Divi内置响应式配置功能
  Divi所有文字、标题、按钮模块都自带响应式设置入口，编辑模块时点击字号输入框旁的设备切换图标，分别切换桌面、平板、手机视图，输入对应px单位的字号保存即可。Divi会自动生成对应的媒体查询规则，你完全不需要手动编写任何media query代码。

• 方案3：CSS变量统一维护，更易扩展
  如果站点字号规则较多，可以用CSS变量定义全局字号，仅在媒体查询中更新变量值，所有元素直接调用变量即可，哪怕后续新增10种字号规则，也不需要新增媒体查询，代码示例：

/* 全局变量定义 */
:root {
  --body-text-size: 16px;
  --h1-size: 48px;
  --h2-size: 36px;
  --btn-size: 14px;
}

/* 仅在断点处更新变量值 */
@media (max-width: 1199px) {
  :root {
    --body-text-size: 15px;
    --h1-size: 42px;
    --h2-size: 32px;
    --btn-size: 13px;
  }
}
@media (max-width: 991px) {
  :root {
    --body-text-size: 14px;
    --h1-size: 36px;
    --h2-size: 28px;
    --btn-size: 13px;
  }
}
@media (max-width: 767px) {
  :root {
    --body-text-size: 13px;
    --h1-size: 28px;
    --h2-size: 24px;
    --btn-size: 12px;
  }
}

/* 元素调用变量，不需要写进媒体查询 */
.et_pb_text_inner { font-size: var(--body-text-size); }
h1.et_pb_title { font-size: var(--h1-size); }
h2.et_pb_title { font-size: var(--h2-size); }
.et_pb_button { font-size: var(--btn-size); }

以上方案均未使用rem、vw单位，所有字号最终生效单位均为px，媒体查询数量最多不超过4条，远低于20条的限制。

内容的提问来源于stack exchange，提问作者Lautaro Lezchik