Siła zapytania mediów należy stosować

mam to HTML i CSS kod:Siła zapytania mediów należy stosować

<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

@media all and (max-width: 400px), (max-height: 300px) { 
    .wrapper .a { 
     .... 
     .... 
    } 
    wrapper. .b { 
     .... 
     .... 
    } 
    .... 
    .... 
}

Teraz chcę, że gdy owijka dostaje klasę „jak-mały”, wszystkie style małym ekranie będzie obowiązywać, nawet jeśli ekran nie jest mały. Nie chcę duplikować kodu css wewnątrz zapytania o media. Jak mogę to rozwiązać?

Kolejnym rozwiązaniem jest wymuszenie zastosowania zapytania o media. Czy jest jakiś sposób to zrobić?

Źródło

2013-03-27 Naor

Może z [* mniej *] (http://lesscss.org). –

@JaredFarrish: Nawet z mniejszą ilością sass lub rysika renderowane css zostaną zduplikowane. – Naor

Interesujące pytanie, czy jest to tylko do celów debugowania? – zessx

-1

Dodaj tę samą klasę dla tych sekcji.

<div class="wrapper"> 
    <div class="makeMeShine a"></div> 
    <div class="makeMeShine b"></div> 
</div>

gdzie A i B mogą mieć swoje własne style :)

Źródło

2013-03-27 09:41:58

Co to jest "makeMeShine"? Jak to ma połączenie z zapytaniem o media? .. – Naor

makeMeShine to tylko klasa, którą dodałem. na przykład .makeMeShine {background: red; }. Zawsze, gdy zastosowana zostanie klasa makeMeShine, będziesz miał czerwone tło. –

A jak to się odnosi do zapytania o media? .. – Naor

W nowszych wersjach Chrome możesz "emulate" a mobile device w celu uruchomienia/test zapytań multimedialnych w przeglądarce na komputerze. (Internet Exploder 11 has the same behavior!) Może być konieczne odświeżenie przeglądarki po zastosowaniu emulacji; Chrome 35 nadal częściowo stosuje zapytania o media, dopóki nie kliknę przycisku Odśwież w powiązanej zakładce.

Źródło

2014-07-15 14:10:27 zedd45

Możesz zrobić coś takiego z odrobiną javascript.

Krótko mówiąc, przeniesiesz zapytania o media z css i przetestujesz je w JS, używając window.matchMedia.

Gdy wiesz, który pasuje, możesz dodać nazwę klasy do znacznika <html>, podobnie do sposobu działania Modernizr. Tak więc na telefonie zobaczysz <html class="like-small">.

CSS zostaną zapisane, aby skorzystać z tych klas wygody, zamiast natywnej zapytania mediów:

.like-small wrapper.a {} 
.like-large wrapper.a {}

(Chciałbym również dodać .NOT-jak-small .NOT-jak- klasy średnie do <html>, aby jeszcze bardziej uprościć css)

Po dopasowaniu zwykłego zapytania o media i dodaniu odpowiedniej nazwy do dokumentu, RWD działa tak samo normalnie. A jeśli chcesz wymusić określony styl, możesz po prostu przepisać nazwy klas w tagu HTML, aby wpłynąć na całą stronę, lub dodać parametr className do dowolnego elementu nadrzędnego, aby wpłynąć tylko na część strony.

Źródło

2014-10-23 14:48:23 wwwmarty

Wiem, że to pytanie jest stare, ale mam nadzieję, że właśnie tego szukaliście (ponieważ nie było odpowiedzi). I nie wiem też, czy dodanie do klasy CSS klasy specyficzności złamało wymóg, aby nie powtarzać CSS.

Możesz osiągnąć to, co chcesz zrobić, zmieniając definicję zapytania @media. Zasadniczo, zamiast mówić, że chcesz, aby coś się wydarzyło, gdy ekran staje się mniejszy niż wartość, zachowaj mały ekran dla zapytania o media i ustaw twoje zapytania o media dla większych ekranów.

Następnie wystarczy zmienić kolejność, którą nazywasz CSS i dodać specyfikację do stylów, do których chcesz zadzwonić do klasy like-small.

HTML:

<div class="wrapper like-small"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 


<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div>

CSS:

.wrapper.like-small .a, 
.wrapper .a { 
     height:200px; 
     width:200px; 
     background:purple; 
    } 

.wrapper.like-small .b, 
    .wrapper .b { 
     height:200px; 
     width:200px; 
     background:blue; 
} 

@media all and (min-width: 400px), (min-height: 300px) { 
    .wrapper .a { 
     height:100px; 
     width:100px; 
    background:yellow; 
    } 
    .wrapper .b { 
     height:100px; 
     width:100px; 
    background:red; 
    } 
}

I skrzypce: http://jsfiddle.net/disinfor/70n37hhj/

Mam nadzieję, że to jest to, co było po (ponad półtora roku temu :)

Źródło

2014-10-23 15:11:41 disinfor

Możesz spróbować z javascript. To zdanie określa przeglądarkę szerokość rzutni i zmusza do stosowania zapytanie nośnika:

$('meta[name="viewport"]').prop('content', 'width=400');

To jest wzięte z tej odpowiedzi: https://stackoverflow.com/a/20137580/1401341 Jak ktoś mówi w komentarzach, to będzie działać tylko z przeglądarek, które wspierają viewport tag.

Źródło

2016-05-17 08:35:23 Fernando

Siła zapytania mediów należy stosować

Odpowiedz

Powiązane problemy