Der Artikel behandelt die Grundlagen und die Syntax von CSS-Media-Queries, die es ermöglichen, CSS basierend auf den Eigenschaften von Medien und Ausgabegeräten anzuwenden. Es werden verschiedene Medientypen und Merkmal-Kombinationen vorgestellt, um Regeln für unterschiedliche Bildschirmgrößen und Gerätetypen zu definieren. Zudem werden Beispiele für die Anwendung von Media Queries gegeben, einschließlich spezifischer Regeln für Drucker, mobile Geräte und verschiedene Bildschirmformate.

1. CSS Media Queries Auf Geräte und Browser reagieren Michael Jendryschik

2. Es gibt verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken.

3. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot;screen&quot; /> @import url(&quot;style.css&quot;) screen ; @media print { div#header, div#sidebar, div#footer { display: none; } }

4. aural für Sprachbrowser

5. braille für Ausgabegeräte mit Braillezeile

6. embossed für Brailledrucker

7. handheld für Handcomputer und Mobiltelefone

8. print für Drucker

9. projection für Projektoren

10. screen für Computermonitore

11. tty für Ausgabemedien mit Festbreitenschrift

12. tv für Fernseher

13. Mit CSS Media Queries ist es möglich, die Einbindung von CSS davon abhängig zu machen, ob ein Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht.

17. @media (min-width: 950px) { /* Regeln für breite Browserfenstern */ } @media (min-width: 450px) and (max-width: 950px) { /* Regeln für Netbooks */ } @media (max-width: 450px) { /* Regeln für mobile Geräte */ }

20. @media screen and (max-width: 600px) { .mast, .intro, .main, .footer { float: none; width: auto; } }

25. @media screen and (max-width: 500px) { ... } @media screen and (max-width: 800px) { ... } @media screen and (min-width: 1024px) { ... } @media handheld and (max-device-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) { ... } @media screen and (min-width: 920px) { ... } @media screen and (min-width: 1350px) { ... } @media screen and (min-width: 1500px) { ... } @media only screen and (max-device-width: 480px) { ... } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }

27. CSS Media Queries: Grundlagen und Syntax

28. Media Queries sind logische Ausdrücke, die die Angabe von Medientypen und bestimmten Medienmerkmalen miteinander verknüpfen.

29. screen and (max-width: 300px ) Wert screen and ( max-width : 300px) Merkmal screen and ( max-width: 300px ) Ausdruck screen and (max-width: 300px) Verknüpfung screen and (max-width: 300px) Medientyp screen and (max-width: 300px) Media Query Beispiel Bezeichnung

30. Das Schlüsselwort and drückt ein logisches Und aus. screen and (max-width: 300px) (min-width: 450px) and (max-width: 950px)

31. Ein Komma steht für ein logisches Oder. @import url(&quot;style.css&quot;) screen , projection; <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot;screen and (min-width: 800px) , projection and (min-width: 800px)&quot; />

32. Das Schlüsselwort not steht für eine logische Negation. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot; not screen and (color)&quot; />

33. Das Schlüsselwort only ist ein Workaround für veraltete Browser, die mit Media Queries nicht umzugehen wissen . <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; media=&quot; only screen and (color)&quot; />

34. CSS3 Media Queries Medienmerkmale

35. Höhe des Geräts Ja device-height Breite des Geräts Ja device-width Höhe der Anzeigefläche Ja height Breite der Anzeigefläche Ja width Beschreibung min/max Merkmal

36. Viewport mindestens 500px hoch? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;vertical-align.css&quot; media=&quot;screen and (min-height: 500px)&quot; />

37. iPhone? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;iphone.css&quot; media=&quot;only screen and (max-device-width: 480px)&quot; />

38. Ausrichtung des Geräts Nein orientation Verhältnis der Merkmale device-width und device-height Ja device-aspect-ratio Verhältnis der Merkmale width und height Ja aspect-ratio Beschreibung min/max Merkmal

39. Seitenverhältnis 16:9? screen and (device-aspect-ratio: 16/9) screen and (device-aspect-ratio: 32/18) screen and (device-aspect-ratio: 1280/720)

40. Horizontale oder vertikale Ausrichtung eines iPad? <link ... href=&quot;ipad-portrait.css&quot; media=&quot;(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait)&quot; /> <link ... href=&quot;ipad-landscape.css&quot; media=&quot;(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape)&quot; />

41. Anzahl der Bits pro Pixel im Bildspeicher eines einfarbigen Geräts Ja monochrome Anzahl der Einträge in der Farb-Lookup-Tabelle des Geräts Ja color-index Farbtiefe des Geräts Ja color Beschreibung min/max Merkmal

42. Schwarzweiß- oder Farbdrucker? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;print-color.css&quot; media=&quot;print and (color)&quot; /> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;print-monochrome.css&quot; media=&quot;print and (monochrome)&quot; />

44. iPhone 4? <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/retina.css&quot; media=&quot;only screen and ( -webkit-min-device-pixel-ratio: 2 )&quot; />

45. Browserkompatibilität

47. Michael Jendryschik http://jendryschik.de http://www.itemis.de http://www.webkrauts.de http://twitter.com/jendryschik http:// facebook.com/jendryschik

48. Quellennachweis http://www.digitale-chancen.de/transfer/assets/468.jpg http://ceipntrasradelapiedad.files.wordpress.com/2010/03/braille.jpg http://gadgets.boingboing.net/Palm-Pre-Disassembled.jpg http://upload.wikimedia.org/wikipedia/commons/d/dc/Westermann_Druckerei_1890.png http://www.infocus.rbt-pressroom.eu/de/download/der-heimkino-projektor-sp8602-kommt-vielen-hochleistungsfhigen-eigenschaften-auf-den-markt-4.jpg http://upload.wikimedia.org/wikipedia/commons/2/2c/Monitor_in_gutter.jpg http://cmsdata.iucn.org/img/original/iberian_lynx_by_antonio_rivas.jpg http://www.comcast.com/MediaLibrary/1/1/About/PressRoom/Images/LogoAndMediaLibrary/Photography/CableNetworks/Teletubbies-Group2.jpg http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries/Default.html http://www.alistapart.com/d/responsive-web-desgin/ex/ex-site-mini.html http://www.hicksdesign.co.uk/journal http://www.pm.ruhr-uni-bochum.de/imperia/md/images/pressestelle/einstein.jpg http://www.colgate.at/OralHealthMonth/AT/2009/arch/2007/colgate_merkmale0805.jpg http://www.claudia-berg-grafik.de/claudia_berg_Grasland.jpg http://www.grossi-online.de/gallery2/d/314-1/Farbe_001.jpg http://www.apple.com/iphone/ http://wallpapers-diq.net/wallpapers/30/Firefox%2C_The_Browser%2C_Reloaded.jpg