移动端CSS媒体查询（Media Query）无法正常生效问题求助

数据老陈

2026-10-8

问题根因

你写的媒体查询存在语法错误，样式没有被正确包裹在对应的媒体查询作用域内，才会出现跨设备生效、规则不触发的问题：

第一组规则的@media screen and (min-width: 500px) {}大括号为空，你把.site-boxed-container .site-content的样式写在了媒体查询的大括号外面，属于全局生效的样式，所有视口宽度都会命中这个规则，自然会同时影响桌面端和移动端设备。
第二组移动端规则的媒体查询语句末尾没有加左大括号，样式没有被纳入该媒体查询的作用范围，所以完全不会触发。

修正后的代码

/* 仅500px及以上的桌面端视口生效 */
@media screen and (min-width: 500px) {
  .site-boxed-container .site-content {
    max-width: 100%;
    padding-top: 50%;
  }
}

/* 仅499px及以下的移动端视口生效，这里去掉了min-width限制适配所有小屏设备 */
@media screen and (max-width: 499px) {
  .site-boxed-container .site-content {
    padding-top: 0%;
  }
}