0

我有以下两个媒体查询：

@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) and (max-width: 479px)正在应用的部分。也就是说，我认为应该应用的 CSS 规则不会被覆盖。正在发生的事情是该规则根本没有被应用。为什么？

4

2 回答 2

1

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

@media  (min-width: 320px)

后面没有任何 and (min-width....)

于 2012-10-02T16:08:40.040 回答
1

有时浏览器只是简单地不允许视口小于某个大小，我认为这条线在 360 度左右下降，所以它可能根本没有注册，即使使用你提到的工具。我不能说，因为我需要看到活生生的例子。

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

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

于 2012-10-02T16:46:16.607 回答