Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Media Queries

CSS Media Queries

Webautoren haben verschiedene Möglichkeiten, den Geltungsbereich von CSS auf bestimmte Medien einzuschränken, sowohl bei der Einbindung eines Stylesheets als auch für bestimmte Regeln innerhalb des Stylesheets. Mit CSS3 Media Queries ist es möglich, die Einbindung von CSS nicht nur von einem bestimmten Medium abhängig zu machen, sondern auch davon, ob das Medium oder Ausgabegerät bestimmte Merkmale aufweist oder nicht. Webautoren können so beispielsweise auf die Breite des Browserfensters reagieren und ein Spaltenlayout auflösen, wenn die Breite für die mehrspaltige Darstellung nicht mehr ausreicht. Oder sie können spezielle Stylesheets für die Darstellung auf dem iPhone oder iPad bereit stellen, abhängig davon, wie das Gerät in der Hand gehalten wird. Das Gute daran ist, dass fast alle aktuellen Browser mit CSS Media Queries umgehen können!

Michael Jendryschik

July 05, 2010
Tweet

More Decks by Michael Jendryschik

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. aural für Sprachbrowser

    View Slide

  4. braille für Ausgabegeräte
    mit Braillezeile

    View Slide

  5. embossed für Brailledrucker

    View Slide

  6. handheld für Handcomputer
    und Mobiltelefone

    View Slide

  7. print für Drucker

    View Slide

  8. projection für Projektoren

    View Slide

  9. screen für
    Computermonitore

    View Slide

  10. tty für Ausgabemedien mit
    Festbreitenschrift

    View Slide

  11. tv für Fernseher

    View Slide

  12. href="style.css" media="screen" />
    @import url("style.css") screen;
    @media print {
    div#header,
    div#sidebar,
    div#footer { display: none; }
    }

    View Slide

  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.

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. @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 */
    }

    View Slide

  19. View Slide

  20. View Slide

  21. View Slide

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

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. @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) { ... }

    View Slide

  28. View Slide

  29. CSS Media Queries:
    Grundlagen und Syntax

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  33. Ein Komma steht für ein logisches Oder.
    @import url("style.css") screen, projection;
    type="text/css" href="style.css"
    media="screen and (min-width: 800px),
    projection and (min-width: 800px)" />

    View Slide

  34. Das Schlüsselwort not steht für
    eine logische Negation.
    href="style.css"
    media="not screen and (color)" />

    View Slide

  35. Das Schlüsselwort only ist ein
    Workaround für veraltete
    Browser, die mit Media Queries
    nicht umzugehen wissen.
    href="style.css"
    media="only screen and (color)" />

    View Slide

  36. CSS3 Media Queries
    Medienmerkmale

    View Slide

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

    View Slide

  38. Viewport mindestens 500px hoch?
    href="vertical-align.css"
    media="screen and (min-height: 500px)"
    />

    View Slide

  39. iPhone?
    href="iphone.css"
    media="only screen
    and (max-device-width: 480px)"
    />

    View Slide

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

    View Slide

  41. 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)

    View Slide

  42. Horizontale oder vertikale
    Ausrichtung eines iPad?
    media="(min-device-width: 481px)
    and (max-device-width: 1024px)
    and (orientation: portrait)" />
    media="(min-device-width: 481px)
    and (max-device-width: 1024px)
    and (orientation: landscape)" />

    View Slide

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

    View Slide

  44. Schwarzweiß- oder Farbdrucker?
    href="print-color.css"
    media="print and (color)" />
    href="print-monochrome.css"
    media="print and (monochrome)" />

    View Slide

  45. View Slide

  46. iPhone 4?
    href="/css/retina.css"
    media="only screen and
    (-webkit-min-device-pixel-ratio: 2)" />

    View Slide

  47. Browserkompatibilität

    View Slide

  48. View Slide

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

    View Slide

  50. 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/CableNe
    tworks/Teletubbies-Group2.jpg
    • 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

    View Slide