如何为iPhone、平板及桌面端编写正确媒体查询？解决样式继承问题

嘿，这问题我之前做响应式开发时也踩过坑！你现在用的是移动优先的媒体查询方案（从min-width:320px开始往上写），这种写法的核心是“窄屏样式作为基础，宽屏在基础上增强”——但这也意味着，当屏幕尺寸达到平板的768px时，移动端的@media (min-width:320px)样式和平板的@media (min-width:768px)样式会同时生效，平板样式自然就继承了移动端里没被覆盖的属性（比如你提到的padding）。

下面给你几个实用的解决办法：

1. 直接在平板样式里覆盖继承的属性 #

这是最直接的方案：在平板的媒体查询中，重新定义你不想继承的移动端属性，覆盖掉原来的值。比如：

/* 移动端基础样式 */
@media only screen and (min-width: 320px) {
  .your-element {
    padding: 10px;
    margin: 5px;
    font-size: 14px;
  }
}

/* 平板样式：明确覆盖需要修改的属性 */
@media only screen and (min-width: 768px) {
  .your-element {
    padding: 20px; /* 这里会替换移动端的10px padding */
    font-size: 16px; /* 同时调整其他需要变化的样式 */
    /* 没提到的margin属性会继续继承移动端的5px */
  }
}

2. 改用桌面优先的媒体查询（可选） #

如果你不想处理继承问题，也可以反过来从宽屏开始写，用max-width向下适配。不过这种写法现在不如移动优先流行，但适合习惯从桌面端开始开发的场景：

/* 桌面端基础样式 */
@media only screen and (min-width: 992px) {
  .your-element {
    padding: 30px;
  }
}

/* 平板样式：覆盖桌面端属性 */
@media only screen and (max-width: 991px) and (min-width: 768px) {
  .your-element {
    padding: 20px;
  }
}

/* 移动端样式：覆盖前面的属性 */
@media only screen and (max-width: 767px) {
  .your-element {
    padding: 10px;
  }
}

3. 用CSS变量统一管理样式（推荐长期维护） #

如果你的项目样式较多，用CSS变量可以让不同断点的样式修改更高效，避免重复写属性：

/* 根元素定义基础变量 */
:root {
  --content-padding: 10px;
  --text-size: 14px;
}

/* 移动端直接使用变量 */
@media only screen and (min-width: 320px) {
  .your-element {
    padding: var(--content-padding);
    font-size: var(--text-size);
  }
}

/* 平板端更新变量值 */
@media only screen and (min-width: 768px) {
  :root {
    --content-padding: 20px;
    --text-size: 16px;
  }
}

/* 桌面端再更新变量 */
@media only screen and (min-width: 992px) {
  :root {
    --content-padding: 30px;
    --text-size: 18px;
  }
}

本质上，移动优先的媒体查询就是“叠加式”的样式生效逻辑，宽屏会继承窄屏所有未被覆盖的属性——这不是bug，是这种写法的设计初衷，所以只要明确覆盖你需要调整的属性就好啦！

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