为什么我的CSS3媒体查询不适用于移动设备？
在styles.css中，我正在使用媒体查询，两者都使用以下变体：
/*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } 当我缩小窗口的时候，网站的大小会根据我想要的常规浏览器（Safari，Firefox）的大小来调整，但是移动设备在手机上根本不显示。 相反，我只看到默认的CSS。
任何人都可以指向正确的方向吗？
所有这三个都是有用的提示，但它看起来像我需要添加元标记：
<meta name="viewport" content="width=device-width" />
现在它似乎在Android（2.2）和iPhone都可以正常工作…
不要忘了在媒体查询上面使用标准的css声明，否则查询也不能工作。
.edcar_letter{ font-size:180px; } @media screen and (max-width: 350px) { .edcar_letter{ font-size:120px; } }
我怀疑only关键字可能是这里的问题。 我没有使用这样的媒体查询的问题：
@media screen and (max-width: 480px) { }
我在一个新闻网站使用bootstrap，但它不能在IE8上工作，我用css3-mediaqueries.js JavaScript，但仍然无法正常工作。 如果你想让你的媒体查询使用这个JavaScript文件添加屏幕到你的媒体查询行在CSS中
这里是一个例子：
<meta name="viewport" content="width=device-width" /> <style> @media screen and (max-width:900px) {} @media screen and (min-width:900px) and (max-width:1200px) {} @media screen and (min-width:1200px) {} </style> <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> <script type="text/javascript" src="css3-mediaqueries.js"></script>
链接线就像上面的线一样简单。
今天我有类似的情况。 媒体查询不起作用。 过了一会儿，我发现“和”之后的空间不见了。 正确的媒体查询应该是这样的：
@media screen and (max-width: 1024px) {}
@media all and (max-width:320px)and(min-width:0px) { #container { width: 100%; } sty { height: 50%; width: 100%; text-align: center; margin: 0; } } .username { margin-bottom: 20px; margin-top: 10px; }
我使用几个方法。 在相同的样式表中，我使用：@media（max-width：450px），或单独确保正确地在标题中包含链接。 我看了你的fixmeup，你有一个混乱的CSS链接数组。 它就像你说的HTC欲望S.
确保你的CSS注释都使用这个标记/* … */ – 这是根据MDN的正确的CSS注释标记
我从他们的文档中直接复制了bootstrap 4媒体查询，并且每个查询都标记了相同的javascript样式注释标记// ！
而且，IntelliJ文本编辑器允许我在LESS文件中注释特定的css行，但是会自动使用// 。 这不是免费的，所以我认为它是正确的。 有一个首选菜单来纠正这种行为。
此外，validation你的css与一个值得信赖的在线validation。 这是W3的一个
