如何使用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

我的建议是在没有浏览器的真实手机中测试代码,如果这是你正在做的事情导致浏览器表现不同

您必须做的另一件重要事情是添加元视图端口标记,但不会像下面给出的那样工作

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

从你的默认css中删除!important使用css特异性,如果真的有必要,那么你的默认css应该是

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

即使这不起作用,你必须向我们展示你的整个CSS或HTML来识别问题