2

レスポンシブサイトを開発するのはこれが初めてです。IE9以外のすべてのブラウザで正常に動作しています。IE9はメディアクエリと互換性があることを知っています。互換モードがオフになっているかどうかを確認しましたが、アイコンが表示されていないので、オフになっていると思います。私のメディアクエリは、基本スタイルの下にリストされています。文字数制限を超えないように、以下のいくつかのメディアクエリを貼り付けます。もっと見る必要がある場合はお知らせください。注：ドキュメントタイプはhtml5用です。

メディアクエリ：

@media only screen and (max-width: 479px) {
  /* 320 =================================================== */

  header .logo a {
    background:url(../images/logo-320.png) no-repeat;
    width:213px;
    height:69px;
    float:left;
    margin-top:35px;
    display:block;
}

}

@media only screen and (max-width: 480px) {
    header {min-width:100%;}

    .main-link-wrap {
    width:100%;
    margin:0 auto;
}

    .featured-prod {
        width:100%; 
    }

    footer {
        min-width:100%;
}

}

@media only screen and (min-width: 480px) {
  /* 480 =================================================== */

    header .logo a {
    background:url(../images/logo-480.png) no-repeat;
    width:310px;
    height:94px;
    float:left;
    margin-top:5px;
    display:block;
}

.featured-prod .product-box {
    width:185px;    
    margin-left:1.8%;
    margin-right:1.8%;
    text-align:left;
    color:#282828;
    font-size:12px;
    font-size:1.2rem;
    line-height:13px;
    float:left;
}

footer .address {
    font-size:22px;
    line-height:32px;   
}

}
4

2 に答える 2

1

非常に単純な html5 ページでテストされています。 

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
</head>
<body>
</body>
</html>

スタイルシートを参照しました。追加した

本体 {背景: #F00;}

最初のクエリに

本体 {背景: #00F;}

2番目のクエリに。

IE9 でサイズを変更すると、背景が赤から青に変化し、メディア クエリが機能していることを示します。メディア クエリを証明するために、ページに同じものを追加することをお勧めします。

背景が期待どおりに変化する場合は、CSS に別の問題があります (たとえば、正しい要素をターゲットにしている、別のスタイルをオーバーライドしているなど)。

背景が変わらない場合は、ページで異常なことが起こっているか、互換性などに問題があります。

于 2012-08-06T21:14:56.470 に答える
0

max-width: 479pxとmax-width: 480pxメディアクエリを使用している理由はありますか？max-width: 479pxブロックにスタイリングが表示されていないと思いますか？これは、これらのルールがルールによって上書きされているためmax-width:480pxです。

これが理由です。ブラウザの幅が320pxの場合、つまり、最大幅の479px未満ですが、480px未満でもあります（両方の条件が満たされています）。そして、あなたはmax-width: 480pxあなたの後にブロックを持っているので、max-width:479pxそれはそれらのルールを上書きしています。私の提案は、あなたmax-width: 480pxがあなたのmax-width: 479pxブロックまたはその逆にあなたのルールを含めることです。

参考までに、この問題はIE9固有のものではありません。その意味でCSSルールを配置すると、すべてのブラウザーで同じように動作します。

于 2012-08-08T03:18:55.990 に答える