✔ CSS Klassen Auflösungsabhängig vergeben?

[Jan-Frederik Stieler]

Hallo,
gibt es eine Möglichkeit, mal abgesehen von Javascript, auflösungsabhängig CSS Klassen einem Element zuzuweisen?

Viele Grüße

 

[SpiceLab]

Die gibt es; schau mal hier: CSS3 Media Queries

 

[Jan-Frederik Stieler]

Hi,
Media-Queries kenn ich natürlich und verwende ich auch. Meine Frage bezog sich auf genau die entgegengesetzte Anwendung.
Nicht ich ändere die Werte einer Klasse durch die Auflösung sondern ich ändere die zugewiesenen Klassen.

Z.B. ich verwende Bootstrap und verwende die Hilfeklasse „pull-right“ welche dem Element „float:right“ hinzufügt.
Bootstrap ist ja nun inzwischen nach dem Paradigma Mobile First aufgebaut und ich will das bei der Desktopauflösung diese Helferklasse nicht mehr verwendet wird.

Grüße

 

[Jan-Frederik Stieler]

Hi,
was ich jetzt rausgefunden habe ist dass es mittels SASS oder LESS mittels @extend oder :extend geht.
Auch wenn hier nicht die Klasse hinzugefügt wird sondern nur deren Attribute, so wie ich das jetzt verstanden habe.

.some-style { background-color:red; }

@media screen and (min-device-width: 480px) {
body {
  @extend .some-style;
}
}

Oder eben nur über Javascript wie z.B. mit http://conditionizr.com/ , http://wicky.nillia.ms/enquire.js/ oder direkt über jQuery mittels addClass/removeClass.

$(window).resize(function(){

  if ($(window).width() <= 320) {

  // is mobile device

  }

});

Viele Grüße