Zapytania o media CSS i! Ważne

Mam stronę internetową, która używa @media zapytań, ale nie wydaje się, aby je ustawić. Zawsze zachowują domyślny styl.Zapytania o media CSS i! Ważne

Na przykład:

#div1 { background:red} 

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

zawsze będzie trzymać tła: czerwony chyba używam !important ale w moich zapytań mediów Ja stylizacji tak wiele selektorów. Czy muszę ustawić każdy styl selektora: !important?

Źródło

2012-04-21 jQuerybeast

Twój kod działa poprawnie na moim systemie. Przetestowałem w Firefoksie, chrome i safari na Macu. Jakie jest twoje środowisko testowe? – Anji

Przepraszamy za spóźnioną odpowiedź. Próbowałem zrozumieć, dlaczego to nie działa. Tutaj jest: http://jsfiddle.net/TUL6h/3/ Spróbuj zmienić kolor na niebieski poprzez zmianę rozmiaru. To się nigdy nie zdarza – jQuerybeast

To tylko wybierze kolor, który jest ostatni w sekcji css. – jQuerybeast

Zmiana wysokości max do min-height: http://jsfiddle.net/jnQYb/

Źródło

2012-04-21 21:52:38 jQuerybeast

To działa dobrze dla mnie.

Spójrz na to: http://jsfiddle.net/TUL6h/1/ - tło jest czerwone, ale po zmianie wysokości części wynikowej zmienia kolor na niebieski w pewnym punkcie.

Jaką przeglądarkę próbujesz?

Źródło

2012-04-21 19:32:27 MarcinJuraszek

To prawda, ale to prawidłowe zachowanie, ponieważ 'background: overrides' 'background: blue'. Powinieneś napisać coś takiego: http://jsfiddle.net/TUL6h/5/, aby to osiągnąć. – MarcinJuraszek

To nie działa. Czy to może być problem z przeglądarką? –

Niekoniecznie ważne służy do nadpisania domyślnego css to, aby zastąpić atrybuty używane w domyślnym stylu. Tak więc, jeśli w zapytaniach o media jest nowy atrybut, nie musisz go używać razem z tym.

Źródło

2012-08-22 13:30:34

Użycie! Ważnego wewnątrz kodu zawartego w zapytaniach @media jest skutecznym sposobem dodawania dynamicznych właściwości stylu do elementów stron, pozostawiając nietknięte "domyślne" css dla łatwej konserwacji.

Przykład:

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

Źródło

2013-09-23 00:10:44 NicholasAbrams

Patrząc na przykład w //jsfiddle.net/TUL6h/55/: trzeba zmienić kolejność zapytań multimedialnych. maksymalna wysokość: 510 pikseli; zawiera maks. Wysokość: 500 pikseli; musi być na pierwszym miejscu, aby uzyskać bardziej szczegółowy przypadek 500px.

Źródło

2013-10-31 09:51:43 emik

jsfiddle.net/TUL6h/55 nie byłby mój. Mój został stworzony do 5. Reszta pochodzi od użytkowników tutaj. – jQuerybeast

Miałem ten sam problem. Zdałem sobie sprawę, że zapytania o media muszą znajdować się na końcu arkuszy stylów (nawet jeśli używasz/importujesz wiele plików w swoim przepływie pracy).

Źródło

2016-01-24 20:32:17 jhorapb

Zapytania o media CSS i! Ważne

Odpowiedz

Powiązane problemy