Kueri Media - Di antara dua lebar

141

Saya mencoba menggunakan kueri media CSS3 untuk membuat kelas yang hanya muncul ketika lebarnya lebih besar dari 400px dan kurang dari 900px. Saya tahu ini mungkin sangat sederhana dan saya kehilangan sesuatu yang jelas, tetapi saya tidak bisa mengetahuinya. Yang saya temukan adalah kode di bawah ini, hargai bantuan apa pun.

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}
css media-queries russellsayshi
sumber

Jawaban:

269

Anda perlu mengubah nilai-nilai Anda:

/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}​

Demo: http://jsfiddle.net/xf6gA/ (menggunakan warna latar belakang, jadi lebih mudah untuk mengonfirmasi)

Sampson
sumber
4
max-widthdan min-widthharus dibalik. cara ini lebih mudah dibaca
machineaddict
33

@ Jonathan Sampson saya pikir solusi Anda salah jika Anda menggunakan beberapa @ media .

Anda harus menggunakan ( min-width terlebih dahulu ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}
WalkerNuss
sumber
10
Jawaban yang diterima tidak salah dengan cara apa pun, tetapi saya berpikir bahwa menggunakan min-width ke max-width adalah konvensi yang lebih jelas dan mudah dibaca.
Dave Powers
1
Setuju dengan @DavePower. Dalam kasus saya, saya memiliki permintaan media yang diformat seperti @WalkerNuss, tetapi telah melupakan yang pertama andsetelah @media screen. Memasukkan yang pertama andmemperbaiki ini untuk saya.
Kyle Vassella
4

hanya ingin meninggalkan .scsscontoh saya di sini, saya pikir ini agak praktik terbaik, terutama saya pikir jika Anda melakukan penyesuaian itu bagus untuk mengatur lebar hanya sekali! Tidak pintar menerapkannya di mana-mana, Anda akan meningkatkan faktor manusia secara eksponensial.

Saya menantikan tanggapan Anda!

// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;

// Prepare your "function"
@mixin in-between {
     @media (min-width:$widthSmall) and (max-width:$widthMedium) {
        @content;
     }
}


// Apply your "function"
main {
   @include in-between {
      //Do something between two media queries
      padding-bottom: 20px;
   }
}
JasParkety
sumber
Jika Anda menggunakan parameter dalam mixin, mungkin itu merupakan "fungsi" ...
1984
3 

.class {
    display: none;
}
@media (min-width:400px) and (max-width:900px) {
    .class {
        display: block; /* just an example display property */
    }
}
Luaskan cuplikan

Charlie
sumber