Question

我有以下两个媒体查询：

@media  (min-width: 320px) and (max-width: 359px){
    .hero-unit h1 {
        margin-bottom: 0;
        font-size: 0.2em;
        line-height: 0.5em;
        letter-spacing: -5px;
        color: inherit;
    }
    .hero-unit p {
        font-size: 0.2em;
        font-weight: 10;
        line-height: 0.5em;
        color: inherit;
    }   
    .hero-unit {
        background: url("../img/now320.jpg");
        height: 5em;
        width: 15em;      
        padding: 0.5em;
        margin-bottom: 2em;
        background-color: #eeeeee;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }   
    h2 {
        font-size: 2em;
        font-weight: 20;
        line-height: 0.5em;
        color: inherit;
    }   
}

@media (min-width: 360px) and (max-width: 479px) {
    .hero-unit h1 {
        margin-bottom: 0;
        font-size: 0.2em;
        line-height: 1em;
        letter-spacing: -5px;
        color: inherit;
    }
    .hero-unit p {
        font-size: 0.2em;
        font-weight: 50;
        line-height: 1em;
        color: inherit;
    }   
    .hero-unit {
        background: url("../img/now360b.jpg");
        padding: 1em;
        margin-bottom: 2em;
        height: 10em;
        width: 18em;
        background-color: #eeeeee;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }   
    h2 {
        font-size: 2em;
        font-weight: 20;
        line-height: 1em;
        color: inherit;
    }   
}

我正在试图找出为什么320宽度规则根本没有应用到我的HTML页面，尽管我已经使用Firefox中的响应式设计工具调整了它的宽度为320px。

我使用Firebug检查了CSS样式，看看发生了什么。我只看到正在应用的@media (min-width: 360px) and (max-width: 479px)部分。也就是说，我认为应该应用的CSS规则不会被覆盖。发生的事情是规则从未应用过。为什么呢？

Answer 1

如果您希望将320px规则应用于所有页面，则需要像这样编写

@media  (min-width: 320px)

之后没有任何和（min-width ....）

Answer 2

有时浏览器只是不允许视口小于特定大小，我认为该行在360左右下降，因此即使使用您提到的工具，也可能根本就没有注册。我不能说，因为我需要看到现场的例子。

您是否在实际的移动设备或至少是模拟器上检查过该网站？ Opera Mobile Emulator非常易于使用。

顺便说一下，如果你想先移动 - 首先想要为320个设备编写CSS，无媒体查询，就像'基线'经验。您可以在此处指定字体系列，颜色，通常应用的样式。然后您添加媒体查询以处理更大和更大的尺寸，您可以在此指定布局和文本大小的更改。重点是 - 不要将320-359样式包装在媒体查询中，因为它将成为每个人的基本体验。

为什么我的320px媒体查询没有被应用？

2 个答案: