| 

.NET C# Java Javascript Exception

3
Websites werden inzwischen auf ganz verschiedenen Geräten aufgerufen, die stark voneinander abweichende Bildschirmgrößen und Auflösungen haben – SmartPhones, Tablets, Netbooks etc. Wie kann ich dies beim Entwurf einer Website am besten berücksichtigen? Soll man die Seite in unterschiedlichen Designs anbieten oder gibt es eine tragfähige variable Lösung, die überall verwendet werden kann?
News:
06.12.2011
sciwizeh 11 2
1 Antwort
4
Die Lösung heißt "CSS Media Queries".

Mittels Media Queries ist es möglich verschiedene Stylesheeds abhängig von devicebezogenen Bedingungen anzuwenden. Media Queries können sowohl für einzelne CSS-Regeln als auch auf ganze Stylesheeds angewendet werden.

Ein Beispiel welches mit CSS Media Querys umgesetzt wurde:


(Quelle: t3n)

Auf folgende Features kann mittels Media Queries zugegriffen werden:

  • width / height
  • device-width / device-height
  • aspect-ratio / device-aspect-ratio
  • color-index / color
  • orientation
  • resolution
  • scan
  • grid

Beispiele für Media-Querys:

ganze Stylesheets:

<head<
<link rel="stylesheet" type="text/css"
media="all and (max-device-width: 480px)" href="css/small-devices_480px.css" />
<link rel="stylesheet" type="text/css"
media="all and (max-device-width: 380px)" href="css/small-devices_380px.css" />
</head>


einzelne Sektionen in einem Stylesheet:

@media all and (max-width: 480px) {
img {
width:115px;
height:158px;
}
h1 {
font-size: 250%;
}
}


Interessante Links zu dem Thema:

Responsive Webdesign mit HTML5 und CSS3 – Grundlagen
(Der Abschnitt über MQ kommt etwas weiter unten, der Absätze vorher könnten aber auch interessant sein)

Media Queries - CSS Beispiel - CSS3 Adventskalender Tag 12

How To Use Media Queries For Device Targeting

Begriffserklärung:

Unter Responsive Webdesign versteht man eine Webdesign welches "automagisch" auf Displaygrößen, Ausrichtung, Auflösung etc. des Anzeigegerätes reagiert.

Konzept von Responsive Webdesign:


(Quelle: http://liechtenecker.at)

Gute Einführung in das Thema: Responsive Webdesign – die Basics
06.12.2011
Floyd 14,6k 3 9
Floyd 14,6k 3 9
Hab mal noch eine Bild dazu gepackt was das Konzept des Responsive Webdesign verdeutlicht und einen Link zu einer gute Einführung in das Thema.
Floyd 06.12.2011

Stelle deine Web-Frage jetzt!