html - 如何使用 css 媒体查询使网页移动友好

Question

我已经添加了一些 css 媒体查询但是它似乎没有做任何改变，我的意思是我已经添加了这段代码

@media screen and (min-width:10px) and (max-width:640px) {
.leftSideBar{display:none !important;}
.rightSideBar{display:none !important;}
}

但左右侧边栏仍然可见我也尝试过更改最小宽度和最大宽度的范围它仍然没有任何区别，我在这里遗漏了什么吗？我是否必须在我的 CSS 中添加更多内容才能使其正常工作？

下面给出的是我两个类的默认CSS

.leftSideBar{display:block !important;}
.rightSideBar{display:block !important;}

Answer 1

我的建议是在真实手机中测试代码，而不是在浏览器中测试代码，如果您正在这样做的话，因为浏览器的行为不同

您必须做的另一件重要的事情是添加元视口(viewport)标签，否则它不会像下面给出的那样工作

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

如果确实有必要，请从您的默认 CSS 中删除 !important 使用 CSS 特异性，这样您的默认 CSS 应该是

.leftSideBar{display:block;}
.rightSideBar{display:block;}

如果这仍然不起作用，您必须向我们展示您的整个 css 或 html 以确定问题