-2

エラーが発生するモバイルアプリケーションを作成しています。

ここで私のコアスタイルはデスクトップ用です:

.abc{
     width:1001px;
}

@media only screen and (max-width : 320px) {
.abc{
     width:320px!important;
}
}
@media only screen and (max-width : 480px) {
.abc{
     width:480px!important;
}
}

上記のスタイルから、480px のスタイルのみが 320px と 480px の両方に適用されます。

この問題を解決するための別の提案はありますか。

4

2 に答える 2

4

これは、max-width:480px;320pxもターゲットにしているためです。最後のものを次のように変更します。

@media only screen and (min-width: 321px)  and (max-width: 480px) {
    .abc {
        width: 480px !important;
    }
}

これにより、そのクエリが321px未満に影響を与えるのを防ぎます。

あなたが必要としているようには見えません!importantこの修正はそれとは何の関係もないので、私があなただったら、将来的に物事を台無しにするかもしれないことを削除します

別の解決策は、320pxのクエリを480pxの下に移動することです。どちらも同じ特異性を持っているため、カスケードの最後に来るものが優先されます。

于 2012-12-18T09:07:00.973 に答える
2

最小幅を設定する

.abc {
    width: 1001px;
}

@media only screen and (max-width: 320px) {
    .abc {
        width: 320px;
    }
}

/* set a min-width here, so these rules don't apply for screens smaller than 321px */
@media only screen and (min-width: 321px) and (max-width: 480px) {
    .abc{
        width: 480px;
    }
}

私が正しければ、!important構文も削除できるはずです...

于 2012-12-18T09:07:16.803 に答える