6

画面の解像度に応じてさまざまな画像サイズを設定しようとしていますが、機能するものと機能しないものがあります。これが私のコードです：

@media screen and (max-width: 1280px) {#gallery-1 img {width:375px;}} // for 1280px screens 
@media screen and (min-width: 1366px) and (max-width: 1439px){#gallery-1 img {width:375px;}} // for 1366px screens 
@media screen and (min-width: 1440px) and (max-width: 1599px) {#gallery-1 img {width:428px;}} // for 1440px screens 
@media screen and (min-width: 1600px) and (max-width: 1919px) {#gallery-1 img {width:434px;}} // for 1600px screens 
@media screen and (min-width: 1920px) {#gallery-1 img {width:540px;}} // for 1920px screens

コードは 1366px および 1280px x 600px の画面ではまったく機能しません。1280px x 960px は 1366px のコードで動作します。1280px x 1024 は、1440px のコードで動作します。誰でも助けてもらえますか？ありがとうございました！

4

2 に答える 2

19

とにかく次のメディアクエリがそれを上書きするので、メディアクエリに最大幅を設定する必要はありません。これを試して：

#gallery-1 img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
    #gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
    #gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
    #gallery-1 img {width:540px;}
}
于 2013-11-04T13:44:19.037 に答える
2

使用する代わりに

@media screen and (min-width: 1366px) {
/* Styles go here */
}

次のようにメディアクエリを別の方法で使用します

@media (max-width: 1366px) and (min-width: 1441px) {
/* Styles go here */
}

このことは、どのスタイルを適用する必要があるかを具体的に呼び出します。

于 2014-06-18T09:57:20.540 に答える