Medya Sorguları - İki genişlik arasında

141

Ben sadece genişliği 400 piksel ve 900 piksel daha az olduğunda görünen bir sınıf yapmak için CSS3 medya sorguları kullanmaya çalışıyorum. Bunun muhtemelen son derece basit olduğunu ve bariz bir şeyi kaçırdığımı biliyorum, ama anlayamıyorum. Ne ile geldim aşağıdaki kod, herhangi bir yardım için teşekkür ederiz.

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

css media-queries

— russellsayshi
kaynak

270

Değerlerinizi değiştirmeniz gerekir:

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

Demo: http://jsfiddle.net/xf6gA/ (arka plan rengini kullanarak, onaylamak daha kolay)

— Sampson
kaynak

4

max-widthve min-widthters çevrilmelidir. bu şekilde daha okunabilir

— machineaddict

33

@Jonathan Sampson, birden fazla @media kullanıyorsanız çözümünüzün yanlış olduğunu düşünüyorum .

Kullanmalısınız (önce minimum genişlik ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}

— WalkerNuss
kaynak

10

Kabul edilen cevap hiçbir şekilde yanlış değildir, ancak bence minimum genişlikten maksimum genişliğe kadar kullanmak daha net, okunabilir bir konudur.

— Dave Powers

1

@DavePowers ile anlaşın. Benim durumumda, benim medya @WalkerNuss gibi biçimlendirilmiş sorgulayamıyor vardı, ama ilk unutmuştu andSONRA @media screen. İlk ekleme andbunu benim için düzeltti.

— Kyle Vassella

4

Sadece .scssörneğimi burada bırakmak istedim , bence bu en iyi uygulama, özellikle eğer özelleştirmeyi yaparsanız genişliği sadece bir kez ayarlamak güzel! Her yere uygulamak akıllıca değil, insan faktörünü katlanarak artıracaksınız.

Geri bildiriminizi bekliyorum!

// 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
kaynak

Karışımdaki parametreleri kullandıysanız, bu bir "işlev" olabilir ...

— 1984

3

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

Snippet'i genişlet

— Charlie
kaynak