响应式断点设置后移动端样式不生效？
我在用媒体查询做响应式布局，设置了768px的断点，但手机上打开还是显示桌面样式，试了几次都不对，是不是写法有问题？
这是我的HTML结构和CSS媒体查询部分：
<div class="container">
<div class="sidebar">侧边栏</div>
<main class="content">主内容</main>
</div>
<style>
.sidebar { display: block; }
@media (max-width: 768px) {
.sidebar { display: none; }
}
</style>- 2
回答
38浏览
响应式断点设置后，为什么在手机上还是显示桌面样式？
我用媒体查询设置了移动端的断点，但用手机访问时布局还是按桌面端渲染，试了几个不同设备都一样，是不是哪里写错了？ 下面是我写的 HTML 和内联的 CSS： <style> @media (...
- 2
回答
89浏览
媒体查询在移动端失效，如何排查和解决？
我在给网站做响应式布局时，用媒体查询设置了移动端样式，但手机访问时旧样式还在，新样式没生效。已经清除缓存、检查了断点数值，但问题依旧。比如在max-width: 768px时隐藏导航栏，但手机上看导航...
- 2
回答
40浏览
断点设置后布局没反应是怎么回事？
我在用媒体查询写响应式布局，设置了断点但页面完全没变化，是不是写法有问题？ 试过把 min-width 和 max-width 换着写，也检查了单位是不是 px，但还是无效。浏览器开发者工具里看，对应...
- 2
回答
92浏览
响应式断点设置后在手机上没生效？
我用媒体查询写了几个断点，比如 @media (max-width: 768px)，在浏览器开发者工具里切换设备看起来没问题，但真机测试时样式完全没变，还是桌面端的布局。 是不是我写法有问题？或者 m...
- 1
回答
94浏览
响应式布局在小屏设备上为啥不生效？
我写了一个简单的响应式布局，用媒体查询设置了不同屏幕宽度下的样式，但在手机上预览时完全没反应，还是桌面端的样式。我试过加 viewport 标签了，也检查了 CSS 顺序，但就是不生效。 这是我的 C...
- 2
回答
95浏览
移动端按需加载组件时如何避免样式错乱？
我在用 Vue 开发移动端页面，想对底部弹窗组件做按需加载，但动态引入后发现样式没生效，布局全乱了。之前是直接 import 引入没问题，改成 () => import('./Popup.vue...
- 2
回答
104浏览
设置了Cache-Control后移动端图片还是重复请求是怎么回事？
我在开发移动端混合应用时遇到个奇怪的问题。给图片资源设置了响应头Cache-Control: public, max-age=3600，但用Chrome开发者工具模拟移动端时，发现每次打开页面都会重新...
- 1
回答
49浏览
缓存更新后样式没生效，是CSS缓存问题吗？
我改了页面的按钮样式，本地测试没问题，但上线后用户看到的还是旧样式。强制刷新才生效，是不是浏览器缓存没更新？ 我已经在构建时给CSS文件加了hash，但好像没起作用。下面是修改后的关键样式： .btn...
- 2
回答
60浏览
Taro 中自定义组件样式不生效怎么办？
我在 Taro 里写了个自定义按钮组件，但加了 class 样式死活不生效，真机调试也没报错，就是没样式。试过用 !important 也不行，是不是 Taro 的样式作用域有问题？ 组件里是这么写的...
- 1
回答
37浏览
移动端断点调试为啥不生效？
我在用 Chrome DevTools 调试手机上的网页，打了断点但代码根本不暂停，console.log 能看到输出，但断点就是不触发，是不是哪里设置错了？ 我试过在 Sources 面板里找到对应...
移动端浏览器默认会按桌面宽度渲染页面，然后等比缩放来适应屏幕，所以即使写了媒体查询也不会生效。需要在 head 里加上这个：
加上之后重启浏览器或者清除缓存再试，768px 断点应该就正常工作了。
另外提醒一下，你的媒体查询写法没问题，但如果想在平板和手机之间做更细致的区分，可以考虑再加一个断点，比如 @media (max-width: 480px) 处理更小的屏幕。