在样式。css中,我使用媒体查询,这两者都使用的变体:

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

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

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

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

有人能告诉我正确的方向吗?


当前回答

嗯,在我的例子中,width值后面的px缺失了……有趣的是,W3C验证器甚至没有注意到这个错误,只是默默地忽略了这个定义。

其他回答

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

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

对我来说,我用max-height代替了max-width。

如果那是你,去改变它!

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

你唯一需要的解决方法是:

把所有的媒体查询放在。css文件的末尾

它起作用了,试试吧

css代码的顺序也很重要,例如:

@media(max-width:600px){
  .example-text{
     color:red;
   }
}
.example-text{
   color:blue;
}

由于执行顺序的原因,上述代码将无法工作。需要写如下:

.example-text{
   color:blue;
}
@media(max-width:600px){
  .example-text{
     color:red;
   }
}

我使用了一些方法。 在相同的样式表中,我使用:@media (max-width: 450px),或者单独的,确保你在标题中有正确的链接。我看了一下你的fixmeup,你有一个令人困惑的css链接数组。就像你说的,它也对HTC desire S起作用。