React CSS模块中@media媒体查询样式在浏览器不生效问题

核心错误点 #

• 媒体查询语法非法：你写的@media(min-width:992px+1px)无法被浏览器识别，原生CSS不支持在媒体查询条件中直接使用算术运算符，整条媒体查询规则会被直接忽略，内部的宽度设置自然不会生效。如果需要设置993px的响应式断点，直接写固定值min-width: 993px即可，必须做计算时要使用calc()函数包裹表达式，写法为min-width: calc(992px + 1px)，当前场景直接写固定值更简洁。
• 基础样式存在语法瑕疵：.NewBlogCard基础样式的闭合大括号后多了一个多余的分号，虽然大部分浏览器会容错该问题，但不符合CSS语法规范，极端情况下可能导致后续样式解析异常。
• 父容器未配置并排布局：即使修正媒体查询语法，默认文档流中的块级元素即便设置了width: 50%也会独占一行，无法实现多卡片并排效果。

修复操作 #

1. 修改BlogCard.module.css文件，修正语法错误后的完整代码如下：

   .NewBlogCard{
       margin: 16px;
       padding: 16px;
       box-sizing: border-box;
       border-radius: 5px;
       box-shadow: 0 2px 5px #CCC;
       background-color: lightblue;
   }
   
   @media (min-width: 993px) {
       .NewBlogCard{
           width: 50%;
       }
   }
   

2. 给根容器.App添加弹性布局配置，让宽度50%的卡片可以在大屏下自动并排。你可以在全局App.css中添加如下规则：

   .App {
       display: flex;
       flex-wrap: wrap;
   }
   

3. 保存文件后使用强制刷新（快捷键Ctrl+F5/Windows、Cmd+Shift+R/Mac）清除浏览器缓存加载新样式，当窗口宽度≥993px时，卡片就会呈现50%宽度、一行两列的效果。

调试提示：可以打开浏览器开发者工具的响应式调试面板，实时查看当前视口宽度，确认窗口尺寸达到媒体查询断点后再验证效果，避免因窗口宽度不足误判样式失效。

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