media queries i javascript

[dargre`]

CSS3 media queries wydają się być bardzo przydatne, ale ja widzę jeden zasadniczy poblem. Podam na przykładzie.

jest np div "container" z takim skróconym css

.container { width:1200px;display:block}
@media only screen and (max-width: 600px) {
.container { display:none}
}

Działa ładnie. DIV chowa się kiedy okno weższe niż 600px i pokazuje się kiedy większe.

Ale teraz do tego dorzucam javascript i w nim dodatkową funkcję jquery która po klinięciu na button pokazuje/chowa DIV przy wąskim oknie:

$(".button).on('click', function(e)  {
     $(".container").toggle();
});

Wiadomo, DIV dostaje styl "display" z wartością "none" albo "block" na przemian.

Tylko, że wtedy naszą regułkę CSS media queries szlak trafia. Przestaje działać, jak tylko styl zmeiniony jest choćby raz przy pomocy javascript.

Co z takim fantem zrobić? Zrezygnować z css media query i klepac funkcje pod resize w JS?

[Trotyl]

A tu nie pomoże zwykłe important!? Tzn.:

@media only screen and (max-width: 600px) {
.container { display:none !important}
}

[dargre`]

Nie pomoże, próbowałem !important. Media query jest po prostu ignorowane po ingerencji w styl objektu z poziomu javascript. W HTML Dom zmieniając jakiś styl zmiana pojawia się przy objekcie. np. chowając objekt w HTML dostajesz

<div class="container" style="display:none;"></div>

Media queries działąją tylko na oryginalne style CSS, przestają działać jak je zmienisz dynamicznie po załadowaniu strony np. javascriptem. Dotyczy to każdego elementu stylu objektu.

I tak zoptymalizowałem js i css, żeby było jak najmniej ingerencji js w responsywne style, ale ciągle jest parę rzeczy, których w CSS nie da rady się osiągnąć. Większość ludzi używa Bootstrap albo podobny engine i nie zawraca sobie głowy takimi pierdutami. Ale jak się chce osiągnąć coś więcej, inaczej wyglądającego i pracującego, a dodatkowo potrafi się to dokładnie przetestewać to wychodzą takie kwiatki.