Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen gezeigt.

--- css:media [2015/07/28 10:51]
webproducer
+++ css:media [2015/12/19 00:00] (aktuell)
@@ Zeile 1: / Zeile 1: @@
 ====== Media Queries (geräteabhängige Stilvorgaben) ======
-Das Leben der Webdesigner ist in den letzten Jahren aufgrund des raschen technischen Fortschritts schwieriger geworden. Heutzutage reicht es nicht mehr, dass eine Webseite in Safari, Google Chrome, Mozilla Firefox, Internet Explorer möglichst gleich aussieht. Hinzu gekommen ist die Ansicht der Webseiten auf den mobilen Endgeräten wie Handys und Tablets wie Samsung Galaxy, iPhone, iPad, HTC, Windows Phone und deren Kollegen. Aber damit nicht genug, denn für jedes dieser mobilen Endgeräte gibt es noch zwei Möglichkeiten: Hochformat und Querformat.
+Die Anforderungen an einen Webdesigner sind in den letzten Jahren aufgrund des raschen technischen Fortschritts deutlich gestiegen. Heutzutage reicht es nicht mehr, eine Webseite für die verschiedenen Browser, wie z. B. Safari, Google Chrome, Mozilla Firefox und Internet Explorer zu optimieren.
-Auf folgender Webseite gibt es eine Auflistung der Media Queries für alle mobilen Apple-Geräte:
+Eine gute Darstellung der Website auf Handys und Tablets wie z. B. Samsung Galaxy, iPhone, iPad, HTC, Windows Phone und deren Kollegen ist mindestens genauso wichtig. Aber damit nicht genug, denn für jedes dieser mobilen Endgeräte gibt es noch zwei weitere Ansichten: Hochformat und Querformat.
-http://stephen.io/mediaqueries/
+Der Begriff [[http://www.responsive-webdesign.mobi/was-ist-responsive-webdesign/|"Responsives Webdesign"]] beschreibt die Optimierung einer Webseite für mobile Endgeräte. Abgesehen von der abweichenen Anzahl von Pixel für Höhe und Breite kommt die Tatsache hinzu, dass es beim Handy und Tablet der Mauspfeil durch ein Touchscreen abgelöst wurde. Somit sind Tipp-Texte sowie hover-Styles nicht mehr möglich.
+Mit Media Queries kann das aktuell verwendete Gerät abgefragt und entsprechend darauf reagiert werden. So kann eine zweispalte Webseite z. B. auf dem Handy als nur einspaltige angezeigt werden, da die Breite hier nicht zur Verfügung steht. Wichtig ist hierbei, dass die Webseite mit einzelnen Elementen wie "div"'s und mit CSS erstellt wurde. Eine Table-Layout-Tabelle z. B. kann nicht durch Media Queries beeinfluss und zerlegt werden.
+Die Abfrage kann beim Einbinden eines externen CSS-Styles (Beispiel 1) sowie direkt im CSS (Beispiel 2) durchgefürt werden.
+**Beispiel 1**
+CSS-Datei für iPhone 5 unf 5S für Hoch- und Querformat:
+<code html>
+<link media="only screen and (min-device-width : 320px) and (max-device-width : 568px)" rel="stylesheet" type="text/css" href="/css/iPhone.css" />
+</code>
+Die Ausrichtung (Hochformat oder Querformat) kann dann in der CSS-Datei "iPhone.css" unterschieden werden:
+<code css>
+@media screen and ( orientation : portrait ) {
+	* { font-size: 42px; } }
+@media screen and ( orientation : landscape ) {
+	#contact { height: auto; }
+}
+</code>
+**Beispiel 2**
+CSS-Styles für iPhone 4 und 4S im Hochformat:
+<code css>
+/* Portrait */
+@media only screen
+  and (min-device-width: 320px)
+  and (max-device-width: 480px)
+  and (-webkit-min-device-pixel-ratio: 2)
+  and (orientation: portrait) {
+}
+</code>
+----
+Auf folgender Webseite gibt es eine Auflistung der Media Queries für alle gängigen Mobilen Geräte:
+https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Wissensarchiv für Entwickler

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Unterschiede

Seiten-Werkzeuge