CSS3 媒体查询不起作用

问题描述

我在以下网站上使用 CSS 媒体查询：

[删除的网站链接]

在 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) { }

第四种方案

我在新闻网站使用引导，但它不适用于 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>

css 链接线简单如上。

第五种方案

今天我有类似的情况。媒体查询无效。过了一会儿，我发现’and’ 之后的空间不见了。适当的媒体查询应如下所示：

@media screen and (max-width: 1024px) {}

参考文献

• CSS3 media queries not working

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。