CSS媒体查询是前端实现响应式布局的核心技术，然而很多开发者在Chrome或Edge浏览器中调试响应式页面时，会遇到修改媒体查询样式后页面无变化的情况，这类问题大多和浏览器缓存机制相关。
问题产生原因
Chrome和Edge浏览器为了提升页面加载速度，会对静态资源如CSS文件进行强缓存。当你修改了CSS文件中的媒体查询规则后，浏览器可能仍然加载本地缓存的旧版本CSS文件，导致新的媒体查询样式无法生效。这种情况在开发环境频繁修改样式时尤为常见。
常见场景
- 修改了针对移动端的媒体查询断点，切换设备模拟器后样式无变化
- 新增了媒体查询规则，刷新页面后规则未触发
- 本地开发时样式正常，部署到测试环境后媒体查询失效
解决方法
1. 手动清除浏览器缓存
最直接的方式是清除当前页面的缓存，在Chrome或Edge中可以通过以下步骤操作：
- 打开开发者工具，切换到Network面板
- 勾选Disable cache选项，之后刷新页面即可加载最新的CSS文件
- 也可以右键点击刷新按钮，选择清空缓存并硬性重新加载
2. 给CSS文件添加版本标识
在引用CSS文件时添加版本参数，每次修改文件后更新版本号，强制浏览器重新请求资源。示例如下：
<link rel="stylesheet" href="style.css?v=1.0.1">
如果使用了构建工具如Webpack，可以配置自动给静态资源添加哈希值，避免手动修改版本号：
// webpack.config.js 配置示例
module.exports = {
output: {
filename: '[name].[contenthash:8].css'
}
}
3. 配置服务器缓存策略
如果是线上环境的问题，可以调整服务器的缓存响应头，针对CSS文件设置合理的缓存规则。比如Nginx中可以添加如下配置：
location ~* .css$ {
# 开发环境可以设置不缓存
add_header Cache-Control "no-cache, no-store, must-revalidate";
# 生产环境可以设置缓存时间，同时配合版本号更新
# add_header Cache-Control "max-age=31536000";
}
4. 检查媒体查询语法
排除缓存问题后，也需要确认媒体查询语法是否正确，避免把语法错误误判为缓存问题。正确的媒体查询语法示例如下：
/* 针对屏幕宽度小于768px的设备 */
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
}
/* 针对屏幕宽度在768px到1024px之间的设备 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
padding: 20px;
}
}
问题排查步骤
当遇到媒体查询失效时，可以按照以下步骤排查：
- 打开开发者工具，查看Network面板中CSS文件的加载状态，确认是否加载了最新版本
- 在开发者工具的Elements面板中，查看对应元素的样式来源，确认是否应用了媒体查询中的规则
- 切换到开发者工具的Application面板，查看Cache Storage中是否有旧的CSS文件缓存，手动清除对应缓存
- 检查媒体查询的断点设置是否符合当前设备的屏幕尺寸
通过以上方法，基本可以解决CSS媒体查询在Chrome和Edge中因缓存导致失效的问题，保障响应式布局的正常展示。