如何使用 CSS 媒体查询使网页对移动设备友好答案

【问题标题】：How to make a webpage mobile friendly with css media queries如何使用 CSS 媒体查询使网页对移动设备友好
【发布时间】：2015-09-14 19:46:10
【问题描述】：

我添加了一些 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;}

【问题讨论】：

你设置视口了吗？ developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
是的，我有这个权利 ""
jsfiddle.net/dm4eryfz 我已经尝试过您的代码并且它工作正常。您通过调整小提琴中的窗口大小来检查。为了进一步调试问题，您能否分享 HTML 或完整的 CSS？
您使用 !important 作为默认类的任何原因？如果您随意使用它，则可能是其他规则在样式表中覆盖了您的媒体查询样式。确保默认规则在媒体查询之前的样式表中。

标签： html css responsive-design media-queries

【解决方案1】：

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

您必须做的另一件重要事情是添加元视图端口标记，否则它将无法像下面给出的那样工作

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

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

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

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

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

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

无论哪种方式都应该工作。你确定html没问题？您可能也想在这里展示它。

【讨论】：

【解决方案4】：

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

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

【讨论】：