如何缩小盒子尺寸？媒体查询设置宽高未生效求助

问题描述 #

前端新手搭建网站时，尝试通过媒体查询修改.content-one1、.content-one2、.content-one3的width、height以及父容器的grid-template-columns适配窄屏，但设置未生效。

尝试的代码：

@media (max-width:700px){
    .content-one1, .content-one2, .content-one3{
        width: 10px;
        height: 20px;
    }
}

排查与解决步骤 #

1. 添加视口meta标签
   移动端浏览器默认会将页面缩放为桌面宽度，导致媒体查询无法触发。必须在HTML的<head>中添加：

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

2. 检查媒体查询位置
   CSS是从上到下解析的，媒体查询必须写在桌面端样式的后面，否则会被后面的桌面样式覆盖。例如：

   /* 正确顺序：先写桌面样式，再写媒体查询 */
   .content-one1, .content-one2, .content-one3{
       width: 200px;
       height: 100px;
   }
   @media (max-width:700px){
       .content-one1, .content-one2, .content-one3{
           width: 10px;
           height: 20px;
       }
   }
   

3. 解决样式优先级问题
   如果桌面端样式使用了更高优先级的选择器（如ID选择器、行内样式、!important），媒体查询中的类选择器会被覆盖。可以：

   • 使用与桌面端相同优先级的选择器，例如桌面端是#parent .content-one1，媒体查询里也要用#parent .content-one1
   • 临时用!important测试（不推荐长期使用，会增加样式维护难度）：

     @media (max-width:700px){
         .content-one1, .content-one2, .content-one3{
             width: 10px !important;
             height: 20px !important;
         }
     }
     

4. 调整Grid布局设置
   如果这些元素是Grid容器的子项，仅修改子元素的宽高可能无效，需要同时修改父容器的grid-template-columns：

   @media (max-width:700px){
       /* 假设父容器类名为grid-container */
       .grid-container{
           grid-template-columns: 1fr; /* 窄屏改为单列布局 */
       }
       .content-one1, .content-one2, .content-one3{
           width: 10px;
           height: 20px;
       }
   }
   

5. 用开发者工具调试
   按F12打开浏览器开发者工具，切换到窄屏模式，选中目标元素查看样式面板：

   • 如果媒体查询的样式被划掉，说明被更高优先级的样式覆盖，调整选择器即可
   • 检查媒体查询是否被正确触发（样式面板会显示当前生效的媒体查询规则）

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