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

Everything looks fine in your code. Try with this meta in your html :

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

Also, if I can give you a little advice, try the mobile first way. It looks like this :

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

@media screen and (min-width:640px) {
  /*design for screen-width >= 640px */
}

This gives a priority on mobile devices so computers will be set as the exception in order to have less code executed on mobile devices which are quite less powerful than a computer ;) here is a little / great tutorial on mobile first approach : http://www.html5rocks.com/en/mobile/responsivedesign/

Good luck and give your html and full css if it's still not working.

Answer 2

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

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

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

从默认值 css 中删除 !important 如果确实有必要，请使用 css 特异性，因此您的默认值 css 应该是

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

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

Answer 3

min-width 和 !important 可能没用。查询很好，但可能会缩短为：

@media screen and (max-width:640px) {
.leftSideBar, .rightSideBar {display:none}
}

无论哪种方式都应该有效。您确定 html 没问题吗？您可能也想在这里展示一下。

Answer 4

此代码最适合移动设备友好的响应式网站：

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

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

How to make a webpage mobile friendly with css media queries

html

css

responsive-design

media-queries