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

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