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

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 中的响应式设计工具将它的大小调整为 320 像素的宽度。

我使用 Firebug 检查了 CSS 样式，看看发生了什么。我只看到应用了 @media (min-width: 360px) 和 (max-width: 479px) 部分。也就是说，这不是我认为应该应用的 CSS 规则被覆盖的情况。发生的事情是根本没有应用该规则。为什么？

Answer 1

有时浏览器根本不允许视口(viewport)小于特定大小，我认为这条线在 360 度左右下降，因此它可能根本没有注册，即使使用您提到的工具也是如此。我不能说，因为我需要查看现场示例。

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

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