如何不使用!important让CSS Media Query设置div宽度的规则生效

• 检查选择器优先级是否足够
  CSS选择器优先级规则为：行内样式（1000）> ID选择器（100）> 类/属性/伪类选择器（10）> 标签选择器（1）。如果原有生效的div宽度规则优先级比你写在媒体查询里的规则高，后者就会被覆盖。你可以通过给媒体查询内的选择器增加层级来提升优先级，比如原有选择器是.box，可以修改为div.box、父级选择器 .box等，优先级超过原有规则即可生效。

• 检查媒体查询的书写顺序
  CSS遵循后写的规则覆盖前序规则的逻辑，如果你的媒体查询代码写在普通宽度规则的前面，后续的普通规则会覆盖媒体查询的设置。请将所有媒体查询代码放在CSS文件末尾，或者放在对应普通样式的后面。

• 确认页面已添加视口meta标签
  如果是在移动端测试，需要在HTML的<head>标签内添加如下代码，否则媒体查询会按设备物理像素判断宽度，而非逻辑像素，导致规则触发不符合预期：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 检查媒体查询语法与条件是否正确
  确认@media关键字、括号书写无误，同时检查宽度阈值的条件是否写反（比如需要小于768px生效却写了min-width: 768px），多个媒体查询的阈值设置是否冲突。

• 通过开发者工具定位冲突规则
  按F12打开浏览器开发者工具，选中目标div元素，在样式面板中找到你写的媒体查询规则，如果规则被划掉，说明被更高优先级/后写的规则覆盖，直接查看生效的规则的选择器结构，对应调整你媒体查询内的选择器优先级即可。

示例参考 #

错误示例（媒体查询写在普通样式前，被覆盖）

@media (max-width: 768px) {
  .content {
    width: 70%;
  }
}
/* 后续普通规则覆盖了上面的媒体查询样式 */
.content {
  width: 100%;
}

正确示例（优先级匹配+顺序正确）

.content {
  width: 100%;
}
/* 媒体查询写在对应普通样式后面 */
@media (max-width: 768px) {
  .content {
    width: 70%;
  }
}

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