CSS medya sorguları ve önemli!

@media sorgularını kullanan bir web sitem var ancak bunları ayarlamıyor gibi görünüyor. Her zaman varsayılan stili korurlar. ÖrneğinCSS medya sorguları ve önemli!

#div1 { background:red} 

@media screen and (max-height:912px) { 
#div1{background:blue} 
}

hep arka plan ile sopa olacaktır: kırmızı Ben !important ama benim medya sorguları içinde o kadar çok seçicileri stil am kullanmadığınız sürece. Her bir seçici tarzı !important'a ayarlamalı mıyım?

kaynak

2012-04-21 jQuerybeast

Kodunuz sistemimde çalışıyor. Mac’te Firefox’a, krom’a ve safari’ye test ettim. Test ortamınız nedir? – Anji

Geç cevap için özür dilerim. Neden çalışmadığını anlamaya çalışıyordum. İşte bu: http://jsfiddle.net/TUL6h/3/ Yeniden boyutlandırarak rengi mavi yapmaya çalışın. Asla olmaz – jQuerybeast

Sadece css bölümünde son olan rengi seçecektir. – jQuerybeast

değiştirme max-height min-height için:! Mutlaka önemli varsayılan stilde kullanılan özelliklerini geçersiz kılmak için varsayılan css yani geçersiz kılmak için kullanılır Değil http://jsfiddle.net/jnQYb/

kaynak

2012-04-21 21:52:38 jQuerybeast

Benim için iyi çalışıyor.

Şuna bir bakın: http://jsfiddle.net/TUL6h/1/ - arka plan kırmızıdır, ancak sonuç bölümü yüksekliğini değiştirdiğinizde bir noktada maviye dönüşür.

Hangi tarayıcıda çalışıyorsunuz?

kaynak

2012-04-21 19:32:27 MarcinJuraszek

Geç cevap için özür dilerim. Neden çalışmadığını anlamaya çalışıyordum. İşte bu: http://jsfiddle.net/TUL6h/3/ Yeniden boyutlandırarak rengi mavi yapmaya çalışın. Bu asla – jQuerybeast

olur. Bu doğru, ama doğru davranış, çünkü arka plan: green 'arka plan: mavi' geçersiz kılar. Bunun gibi bir şey yazmalısınız: http://jsfiddle.net/TUL6h/5/ bunu başarmak için. – MarcinJuraszek

Bu işe yaramıyor. Bu bir tarayıcı sorunu olabilir mi? –

. Dolayısıyla, medya sorgularında yeni bir özellik varsa, bununla birlikte kullanmak zorunda değilsiniz.

kaynak

2012-08-22 13:30:34

@media sorgularınızda yer alan kodun içinde önemli olan, sayfa öğelerinize dinamik stil özellikleri eklemenin etkili bir yoludur.

Örnek:

<html> 
    <head> 
    <style> 
    @media all and (max-width: 768px) { 

    /* CSS styles targeting screens of smaller sizes and/or resolutions (IE phones and tablets) */ 

     #semantically-named-element p 
     { width: 60% !important; 
     background: rgba(0,0,255,1)!important; 
     margin: auto !important; } 

     #semantically-named-element span 
     { display: none !important; } 

    } 
    /* Look ma no media queries needed for default CSS below! Very easy to discern default styles, when the default code is the stuff not wrapped in queries. Period. */  

    /* Default CSS style attributes for any viewports that do not fit into the low or high resolution/screen size parameters set above and below. Also the fallback for browsers that still disregard CSS media queries */ 
    #semantically-named-element p 
     { width: 90%; 
      background: rgba(255,0,0,1); 
      margin: auto; } 

    #semantically-named-element span 
     { display: block; 
      background: rgba(0,0,0,0.8); 
      color: #FFF; 
      text-align: center;} 
    @media all and (min-width: 968px) { 
    /* CSS styles targeting very large or very high resolution viewports at the 769 pixels wide "break-point" */ 
     #semantically-named-element p 
     { width: 80% !important; 
     background: rgba(0,255,0,1)!important; 
     margin: auto !important; } 

     #semantically-named-element span 
     { display: block !important; 
     background: rgba(0,0,0,0.8)!important; 
     color: #FFF !important; font-size: 200%; } 
    } 
    </style> 
    </head> 

    <body> 
     <div id="semantically-named-element"> 
     <p> Usage of !important inside of the code contained within your @media queries is an effective way to add dynamic style properties to your pages elements, while leaving your 'default' css intact for easy maintenance.<span>hidden until tablet greater 768 viewport pixel width</span></p> 
     </div> 
    </body> 
</html>

kaynak

2013-09-23 00:10:44 NicholasAbrams

//jsfiddle.net/TUL6h/55/ daki örnek aranıyor: Sen medya sorguları sırasını değiştirmek gerekir. max yükseklik: 510 piksel; , max-height içerir: 500px; , daha fazla özel 500px arıcılıma sahip olması için önce gelir.

kaynak

2013-10-31 09:51:43 emik

jsfiddle.net/TUL6h/55 benim olmayacaktı. Mayın 5'e kadar oluşturuldu. Geri kalanlar buralardaki kullanıcılardan. – jQuerybeast

Aynı problem vardı. Medya sorgularının stil sayfalarının sonunda olması gerektiğini fark ettim (iş akışınızda birden fazla dosya kullanıyor veya içe aktarıyor olsanız bile).

kaynak

2016-01-24 20:32:17 jhorapb

CSS medya sorguları ve önemli!

cevap

İlgili konular