如何使一个网页移动友好与CSS媒体查询

我增加了一些CSS媒体查询，但它似乎并没有做任何改变，我的意思是我加入这个代码如何使一个网页移动友好与CSS媒体查询

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

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

下面给出的是两个类

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

来源

2015-06-28 tina

是否设置视？ https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag – ne1410s

是的，我有这一个权利“” – tina

https：// jsfiddle.net/dm4eryfz/我已经试过你的代码，它的工作正常。你通过在小提琴中调整窗口大小来检查。为了进一步调试问题，可以请您分享HTML还是完整的CSS？ – gauravmuk

我的建议是，以测试在真实手机的代码不使用浏览器，如果这就是你在做什么原因的浏览器不同的表现

你必须做的另一个重要的事情是加元视口标签，而不在于它不会从您的默认CSS使用CSS的特异性，而不是工作是否像下面

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

给出的删除！重要的它真的有必要让你的默认CSS应该是

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

如果即使这不起作用，你必须告诉我们你的整个CSS或HTML来识别问题

来源

2015-06-30 15:56:06

一切都在你的代码看起来不错我的默认CSS。尝试使用此元在你的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，如果它仍然不工作。

来源

2015-06-28 07:47:08 Gunthari

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

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

应以任一方式工作。你确定这个html很好吗？你也可以在这里显示。

来源

2015-06-30 16:23:28

此代码是最好的移动友好的响应式网站：

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

来源

2015-10-14 04:43:03 abhishek

如何使一个网页移动友好与CSS媒体查询

回答

相关问题