From 869dd2069c695ee7040cd3261713212155819f42 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Mon, 14 Dec 2020 12:18:12 -0500 Subject: final dump 2020-12-14 --- files/de/web/css/media_queries/index.html | 74 ++++++++++++++++++++++--------- 1 file changed, 53 insertions(+), 21 deletions(-) (limited to 'files/de/web/css/media_queries/index.html') diff --git a/files/de/web/css/media_queries/index.html b/files/de/web/css/media_queries/index.html index c6da1617ab..7010034fea 100644 --- a/files/de/web/css/media_queries/index.html +++ b/files/de/web/css/media_queries/index.html @@ -10,13 +10,36 @@ tags: - TopicStub translation_of: Web/CSS/Media_Queries --- -

{{CSSRef}}

+
+
+
+
{{CSSRef}}
-

Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.

+

Mit Media Queries können Sie Ihre Website oder App abhängig vom Vorhandensein oder Wert verschiedener Geräteeigenschaften und Parameter anpassen.

-

Reference

+

Sie sind eine Schlüsselkomponente des responsiven Designs. Eine Media Query kann zum Beispiel die Schriftgröße auf kleinen Geräten verkleinern, den Abstand zwischen Absätzen vergrößern, wenn eine Seite im Hochformat angezeigt wird, oder die Größe von Schaltflächen auf Touchscreens erhöhen.

-

At-rules

+

Verwenden Sie in CSS die @-Regeln {{cssxref("@media")}}, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query bedingt anzuwenden. Verwenden Sie {{cssxref("@import")}}, um ein ganzes Stylesheet bedingt anzuwenden.

+ +

Media Queries in HTML

+ +

In HTML können Media-Queries auf verschiedene Elemente angewendet werden:

+ +
    +
  • Im {{HTMLElement("link")}}-Attribut des {{htmlattrxref("media", "link")}}-Elements definieren sie das Medium, auf das eine verlinkte Ressource (typischerweise CSS) angewendet werden soll.
    • +
  • Im {{HTMLElement("source")}}-Attribut des {{htmlattrxref("media", "source")}}-Elements definieren sie die Medien, auf die diese Quelle angewendet werden soll. (Dies ist nur innerhalb von {{HTMLElement("Bild")}}-Elementen gültig.)
    • +
  • Im {{HTMLElement("style")}}-Attribut des Elements {{htmlattrxref("media", "style")}} definieren sie die Medien, auf die der Stil angewendet werden soll.
    • +
+ +

Media Queries in JavaScript

+ +

In JavaScript können Sie die Methode {{domxref("Window.matchMedia()")}} verwenden, um das Fenster gegen eine Medienabfrage zu testen. Sie können auch {{domxref("MediaQueryList.addListener()")}} verwenden, um benachrichtigt zu werden, wenn sich der Zustand einer Abfrage ändert. Mit dieser Funktionalität kann Ihre Website oder App auf Änderungen der Gerätekonfiguration, der Ausrichtung oder des Zustands reagieren.

+ +

Mehr über die programmatische Verwendung von Media Queries erfahren Sie in Media Queries testen.

+ +

Referenz

+ +

@-Regeln

    @@ -25,52 +48,61 @@ translation_of: Web/CSS/Media_Queries
-

Guides

+

Anleitung

-
Using media queries
-
Presents what media queries are doing and explains the possible expressions.
-
Testing media queries
-
Explains how to test a media query programmatically, from JavaScript.
+
Media Queries verwenden
+
Stellt Media Queries, ihre Syntax und die Operatoren und Media Features vor, die zur Konstruktion von Media Query-Ausdrücken verwendet werden.
+
Media Queries programmatisch testen
+
Beschreibt, wie Sie Media Queries in Ihrem JavaScript-Code verwenden, um den Zustand eines Geräts zu ermitteln und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. wenn der Benutzer den Bildschirm dreht oder die Größe des Browsers ändert).
+
Verwendung von Media Queries für Barrierefreiheit
+
Erfahren Sie, wie Media Queries dem Benutzer helfen können, Ihre Website besser zu verstehen.
-

Specifications

+

Spezifikationen

- + - + + + + + + - + - + - + - +
SpecificationSpezifikation StatusCommentKommentar
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}}
{{SpecName('CSS3 Conditional')}} {{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}} {{Spec2('CSS4 Media Queries')}} -


-  

-
{{SpecName('CSS3 Media Queries')}} {{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}} {{Spec2('CSS2.1')}} Ursprüngliche Definition
-

Browser compatibility

+

Siehe auch

-{{Compat("css.at-rules.media")}} +
    +
  • Verwenden Sie {{cssxref("@supports")}}, um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.
    • +
+
+
+
-- cgit v1.2.3-54-g00ecf