it-swarm.dev

为什么我的CSS3媒体查询无法在移动设备上运行?

在styles.css中,我使用的是媒体查询,两者都使用以下变体:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

当我缩小窗口时,网站会在常规浏览器(Safari,Firefox)中调整我想要的布局,但是,手机上根本不会显示移动布局。相反,我只看到默认的CSS。

谁能指出我正确的方向?

150
redconservatory

所有这三个都是有用的提示,但看起来我需要添加一个元标记:

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

现在它似乎适用于Android(2.2)和iPhone都可以......

375
redconservatory

不要忘记有标准的css声明 上面 媒体查询或查询也不会。

.edcar_letter{
    font-size:180px;
}

@media screen and (max-width: 350px) {
    .edcar_letter{
        font-size:120px;
    }
}
52
The4thIceman

我怀疑关键字only可能是这里的问题。我没有使用像这样的媒体查询的问题:

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

21
Moin Zaman

我在新闻网站上使用了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>

css链接线就像上面一行一样简单。

17
Mohsen

今天我有类似的情况。媒体查询无效。过了一会儿,我发现'和'之后的空间丢失了。适当的媒体查询应如下所示:

@media screen and (max-width: 1024px) {}
10
dklog79
@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;
}
1
Ketam Srinivas

确保你的css评论都使用这个标记/* ... */ - 这是根据MDN的css的正确评论标记

我直接从他们的文档中复制了bootstrap 4媒体查询,并且每个查询都标有相同的javascript样式注释标记//

此外,IntelliJ文本编辑器允许我在LESS文件中注释掉特定的css行,但自动使用//。它不是免费软件所以我认为它是正确的。有一个用于纠正此行为的首选项菜单。

此外,使用值得信赖的在线验证器验证您的CSS。 这是W3的一个

1
Cameron Donahue

对我来说,我已经指出max-height而不是max-width

如果那就是你,那就改变吧!

    @media screen and (max-width: 350px) {    // Not max-height
        .letter{
            font-size:20px;
        }
    }
0
Ruto Collins

我使用一些方法取决于。在我使用的相同样式表中:@media(max-width:450px),或单独确保正确地在标题中有链接。我查看了你的fixmeup,你有一个令人困惑的css链接数组。就像你对HTC欲望S.的说法一样。

0
Benteh

如果浏览器缩放级别不正确,也可能发生这种情况。您的浏览器窗口缩放应为100%。在Chrome中,使用Ctrl + 0重置缩放级别。

0
Suhail AKhtar