桌面视口下Grid布局显示异常问题求助

移动端、平板端下Grid与article元素显示正常，但切换到桌面端视口时，Grid布局出现变形，且桌面端CSS样式规则未生效。

各端现有CSS样式 #

移动端样式规则 #

.mobile {display: block;}
.tablet-desktop {display: none;}
/* Style Rules for main content */
main {
  background-color: #fff;
  padding: 2%;
  font-size: 1.15em;
  font-family: 'Roboto Slab', serif;
}
.mobile h3 {text-shadow: 5px 5px 8px #ccc;}
article {padding: 2%;}
article h3 {text-align: center;}
article img {margin: 0 auto;}
article ul {margin-left: 10%;}
article:nth-of-type(2) {background-color: rgba(204, 204, 204, 0.3);}

平板端样式规则 #

.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
}
.pic-text {font-size: 1em;padding: 10px;}
aside {
  text-align: center;
  font-size: 1.25em;
  font-style: italic;
  font-weight: bold;
  padding: 2%;
  background-color: rgba(204, 204, 204, 0.5);
  box-shadow: 5px 5px 8px #000;
  text-shadow: 5px 5px 5px #b3b3b3;
  border-radius: 0 15px;
}

桌面端样式规则 #

main {clear: left;}
main h1 {font-size: 1.8em;}
article h3 {font-size: 1.50em;}
.pic-text {font-size: 1.5em;padding: 20px;}
.frame {opacity: 0.9;}
.frame:hover {opacity: 1;box-shadow: 8px 8px 10px #808080;}

具体解决步骤 #

1. 修正媒体查询的顺序与断点 #

CSS规则从上到下解析，后面的规则会覆盖前面的。必须确保桌面端的媒体查询放在平板端之后，示例结构：

/* 移动端：屏幕宽度≤600px */
@media screen and (max-width: 600px) {
  /* 移动端样式 */
}

/* 平板端：屏幕宽度601px~1024px */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  /* 平板端样式 */
}

/* 桌面端：屏幕宽度≥1025px，必须放在最后 */
@media screen and (min-width: 1025px) {
  /* 桌面端样式 */
}

如果之前没给各端样式包裹媒体查询，这是核心问题——样式会全局生效，导致桌面端被移动端/平板端样式覆盖。

2. 重新声明桌面端Grid布局 #

桌面端样式里没保留Grid核心属性，易因优先级或继承问题导致布局变形。需在桌面端媒体查询里重新指定Grid规则：

@media screen and (min-width: 1025px) {
  .grid {
    display: grid;
    /* 用fr单位更适配桌面的三列布局 */
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px; /* 可加大间距适配桌面尺寸 */
  }
  /* 其他桌面端样式... */
}

3. 排查样式优先级冲突 #

用浏览器开发者工具（F12）选中变形的Grid元素，查看样式面板：

• 若桌面端的.pic-text、.frame等样式被划掉，说明被更高优先级的规则覆盖。
• 可给桌面端选择器增加权重，比如把.pic-text改成main .grid .pic-text，或临时用!important调试（不推荐长期使用）。

4. 清除布局冲突 #

桌面端的main { clear: left; }若用于解决浮动问题，需确认：

• Grid容器.grid没有被设置float属性，浮动会直接破坏Grid布局。
• 若有其他浮动元素影响，给.grid添加clear: both;清除浮动干扰。

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