Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:ffit:css:learningunits:lu03:media-queries [2024/09/12 07:01] – kdemirci
+++ modul:ffit:css:learningunits:lu03:media-queries [2024/09/19 07:50] (aktuell) – kdemirci
@@ Zeile 1: / Zeile 1: @@
-====== Responsive Webdesign - Media Queries (CSS3) ======
+====== LU03b - Responsive Webdesign - Media Queries (CSS3) ======
 ===== Einleitung ======
@@ Zeile 12: / Zeile 12: @@
 </WRAP>
-===== Variante 1 - im <head>-Element =====
+==== Variante 1 - im <head>-Element ====
 <code css>
@@ Zeile 23: / Zeile 23: @@
 </code>
-Hier wird mobile.css nur verwendet, wenn die maximale Bildschirmbreite 480 Pixel nicht überschritten wird. Bei Geräten mit einer höheren Auflösung wird <code>basis.css</code> verwendet. Ältere Webbrowser, die die CSS3-Media Queries (hier: media="screen and (max-width: 480px)") nicht kennen, ignorieren diese Abfrage und verwenden immer <code>basis.css</code> – auch wenn der Bildschirm unter 480 Pixel breit ist.
+Hier wird mobile.css nur verwendet, wenn die maximale Bildschirmbreite 480 Pixel nicht überschritten wird. Bei Geräten mit einer höheren Auflösung wird basis.css verwendet. Ältere Webbrowser, die die CSS3-Media Queries (hier: media="screen and (max-width: 480px)") nicht kennen, ignorieren diese Abfrage und verwenden immer basis.css> – auch wenn der Bildschirm unter 480 Pixel breit ist.
+==== Variante 2 - im <style>-Element ====
-<a name="variante-2---im-ltstylegt-element"></a>
-#### Variante 2 - im <code>&lt;style&gt;</code>-Element
 Auch das Einbinden von Abfragen im öffnenden style-Tag ist wie folgt möglich:
-```
+<code css>
 <style type="text/css" media="screen and (max-width: 480px)">
 /* CSS-Anweisungen für Bildschirm bis max. 480 Pixel */
 </style>
-```
+</code>
-<a name="variante-3---mit-der-64media-regel"></a>
+==== Variante 3 - mit der @media-Regel ====
-#### Variante 3 - mit der <code>&#64;media</code>-Regel
+Neben dem <link>- und <styl>-Element können Media Queries auch als @media-Regel innerhalb eines Stylesheets notieren.
-Neben dem <code>&lt;link&gt;</code>- und <code>&lt;style&gt;</code>-Element können Media Queries auch als <code>&#64;media</code>-Regel innerhalb eines Stylesheets notieren.
-```
+<code css>
 ...
 #mainarticle {
@@ Zeile 51: / Zeile 48: @@
 }
 ...
-```
+</code>
-Hier wird die <code>&#64;media</code>-Regel, den Hintergrund von <code>#mainarticle</code> orange zu färben, nur verwendet, wenn die maximale Bildschirmgröße nicht die 480 Pixel überschritten hat. Ansonsten wird der Hintergrund von <code>#mainarticle</code> mit gelber Farbe eingefärbt.
+Hier wird die @media-Regel, den Hintergrund von #mainarticle orange zu färben, nur verwendet, wenn die maximale Bildschirmgröße nicht die 480 Pixel überschritten hat. Ansonsten wird der Hintergrund von #mainarticle mit gelber Farbe eingefärbt.
-<a name="variante-4---mit-der-64import-regel"></a>
+==== Variante 4 - mit der @import-Regel =====
-#### Variante 4 - mit der <code>&#64;import</code>-Regel
+Als letzte Variante wird die @import-Regel nachfolgend veranschaulicht:
-Als letzte Variante wird die <code>&#64;import</code>-Regel nachfolgend veranschaulicht:
-```
+<code css>
 ...
 @import url('css/mobile_480.css')
     screen and (max-width: 480px);
 ...
-```
+</code>
-<a name="medienmerkmale-verknüpfen"></a>
+===== Medienmerkmale verknüpfen =====
-### Medienmerkmale verknüpfen
+Das mehrere Medienmerkmal können mit dem Schlüsselwort and verknüpft. Die Verknüpfung kann auch mit und ohne Medientyp erfolgen.
-Das mehrere Medienmerkmal können mit dem Schlüsselwort <code>and</code> verknüpft. Die Verknüpfung kann auch mit und ohne Medientyp erfolgen.
-<a name="beispiel-mit-and-verknüpfung"></a>
+==== Beispiel mit and-Verknüpfung ====
-#### Beispiel mit <code>and</code>-Verknüpfung
 Bei der zweiten Media Query wird das Stylesheet dazwischen nur dann verwendet, wenn alle mit and verbundenen Ausdrücke und Kriterien erfüllt werden. Im Beispiel muss der Medientyp ein Bildschirm sein und die Bildschirmbreite beträgt mindestens 768 Pixel und maximal 960 Pixel.
-```
+<code css>
 ...
 @media screen and (min-width: 960px) {
@@ Zeile 83: / Zeile 78: @@
 }
 ...
-```
+</code>
-<!--
+==== Beispiel mit only-Verknüpfung ====
-<a name="beispiel-mit-only-verknüpfung"></a>
+Mit only wird gesorgt, dass ältere Webbrowser nichts mit der Media Query anfangen können.
-#### Beispiel mit <code>only</code>-Verknüpfung
-Mit <code>only</code> wird gesorgt, dass ältere Webbrowser nichts mit der Media Query anfangen können.
-Ein alter Webbrowser kennt <code>&#64;media screen</code> (CSS2). Mit <code>only</code> ignoriert der Webbrowser die Angabe von <code>and (max-width: 480px)</code> (CSS3). Damit wird CSS-Anweisungen für Smartphones auch auf einem Desktop verwendet:
+Ein alter Webbrowser kennt @media screen (CSS2). Mit only ignoriert der Webbrowser die Angabe von and (max-width: 480px) (CSS3). Damit wird CSS-Anweisungen für Smartphones auch auf einem Desktop verwendet:
-```
+<code css>
 ...
 @media only screen and (max-width: 480px) {
@@ Zeile 98: / Zeile 91: @@
 }
 ...
-```
+</code>
--->