如何使用CSS媒体查询使网页适配移动设备

Question

我添加了一些CSS媒体查询，但似乎没有任何变化，我的意思是我添加了这段代码

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

但是左侧和右侧的边栏仍然可见。我还尝试更改min-width和max-width的范围，但仍然没有任何区别。我是否漏掉了什么？我需要在我的CSS中添加更多内容才能使其正常工作吗？

以下是我两个类的默认CSS：

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

- tina

---

你设置了视口吗？https://developer.mozilla.org/zh-CN/docs/Mozilla/Mobile/Viewport_meta_tag - ne1410s

是的，我有这个 "<meta name='viewport' content='width=device-width'>" - tina

我已经尝试了你的代码，它运行良好。你可以通过在fiddle中调整窗口大小来检查。为了进一步调试问题，你能否分享HTML或完整的CSS？ - gauravmuk

你为什么在默认类中使用!important？如果你过度使用它，可能会导致其他规则覆盖样式表中的媒体查询样式。确保在媒体查询之前在样式表中定义默认规则。 - harrypujols

Answer 1

我的建议是，在真正的移动设备上测试代码，而不是在浏览器中进行测试，因为浏览器的行为不同。

另一个重要的事情是添加meta viewport标签，否则它不会像下面给出的那样工作。

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

如果确实有必要，从默认的css中删除!important，使用css特异性代替。因此，您的默认css应该为：

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

如果这样还不行，您需要展示您的整个CSS或HTML来确定问题所在。

- Dinny Paul

Answer 2

您的代码看起来很好。 尝试在您的HTML中添加此元标记：

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

另外，如果我可以给你一点建议，尝试使用移动优先的方式。它看起来像这样：

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

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

这将优先考虑移动设备，因此计算机将被设置为例外，以便在移动设备上执行较少的代码，因为移动设备比计算机弱得多 ;) 这是一个关于移动设备优先方法的小/大教程： http://www.html5rocks.com/en/mobile/responsivedesign/ 祝好运，如果仍然无法正常工作，请提供您的HTML和完整CSS。

- Gunthari

Answer 3

min-width和!important可能是无用的。查询很好，但可以缩短为：

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

应该两种方式都可以工作。您确定HTML没有问题吗？您可能也想在此处显示它。

- lucian

Answer 4

这段代码是最适合移动设备友好响应式网页的：

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

- abhishek