如何正确使用@media screen适配桌面端和移动端CSS样式？

常见错误原因&修复方法 #

• 视口元标签缺失 #

  移动端适配必须在HTML的head标签内添加视口声明，否则媒体查询无法正确识别设备实际宽度：

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

• 媒体查询顺序错误 #

  CSS层叠规则是后面的样式会覆盖前面的同优先级样式，顺序写错会导致生效规则不符合预期：

  桌面端优先写法（默认展示桌面样式，小屏切换为移动端）：先写桌面端全量样式，再写max-width移动端媒体查询

  /* 桌面端样式默认全局生效 */
  @import url("desktop.css");
  
  /* 屏幕宽度≤767px时覆盖为移动端样式 */
  @media screen and (max-width: 767px) {
    @import url("mobile.css");
  }
  

  移动端优先写法（默认展示移动端样式，大屏切换为桌面端）：先写移动端全量样式，再写min-width桌面端媒体查询

  /* 移动端样式默认全局生效 */
  @import url("mobile.css");
  
  /* 屏幕宽度≥768px时覆盖为桌面端样式 */
  @media screen and (min-width: 768px) {
    @import url("desktop.css");
  }
  

• 同选择器样式冲突 #

  两个CSS文件中存在相同选择器的属性定义时，要确认媒体查询的覆盖逻辑符合预期，可通过浏览器开发者工具（F12）的元素样式面板，查看被划掉的失效样式定位冲突点。

• 媒体查询语法错误 #

  检查是否漏写and关键字、断点单位错误、媒体查询块的大括号不闭合，这类语法错误会导致整个媒体查询块失效。

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