Inhalte abhängig von der Fensterbreite ausblenden

19. Mär 2013

Abhängig von der Fensterbreite lassen sich Inhalte ausblenden. Die Logik selbst wird über media-queries definiert.

Abhängig von der Fensterbreite lassen sich Inhalte vom Redakteur ausblenden. Die Logik selbst wird über media-queries definiert. 

Der Inhalt wird ausgeblendet, wenn die Fensterbreite kleiner gleich 768 Pixel ist

/*@wCssFragment{class:mediaquerySize;variant:max768;caption:wenn die Fensterbreite kleiner gleich 768 Pixel ist;caption-en:if window width is equal or less 768 pixel} */
@media only screen and (max-width: 768px){
  .max768 {display:none}

Der Inhalt wird ausgeblendet, wenn die Fensterbreite größer 768 Pixel ist

/*@wCssFragment{class:mediaquerySize;variant:min769;caption:Sobald die Fenstergröße größer 768 Pixel ist;caption-en:Hide if window width is larger than 768 pixel} */
@media only screen and (min-width: 769px){
  .min769 {display:none}

Welche Auswahl der Redakteur im Editor hat, können Sie in der CSS-Datei festlegen. Unabhängig von den CSS-Definitionen prüft der Editor auf die vorhandenen CSS-Varianten der Media-Queries. Da das Ein- und Ausblenden über CSS geschieht, werden die Inhalte unabhängig von der Bildschirmgröße mit mit übertragen.

Zur Demonstration des bedingten Strukturelementes