3

U5: Responsive Webdesign Vorteile - Mehr Usability - Mehrere Darstellungen auf versch. Endgeräten - Reichweite erhöhen - Mehr Umsatz - eﬀektivere Suchmaschinenoptimierung - von Überall erreichbar Nachteile - nur wenig Text oder andere Inhalte einfügbar - mehr Aufwand für Erstellung der Website - langsamere Ladezeit - Ältere Browser verstehen Anweisungen von responsiv nicht - Dauer der Entwicklung ist höher Media Query = Medienabfrage Es wird ermittelt, welcher Medientyp (z.B. Bildschirm, Drucker...) der Browser vorﬁndet. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird die damit verknüpfte CSS-Ressource eingebunden. device-width - Geräte Breite Beschreibt die Breite des Ausgabegerätes, z.B. Breite eines Bildschirms in Pixel. Beispiel: @media (device-width: 800 px) Breite entspricht genau 800px width / height Beschreibt bei fortlaufenden Medien die Breite/Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite/Höhe einer Seite. Beispiel: @media (width: 60em) Breite entspricht genau 60em @media (min-width: 50em) Breite beträgt mindesten 50em @media (max-width: 70em) Breite beträgt maximal 70em Beachten Auch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.

Upload
phuochiep123
Category

Real Estate
view
4
download
0

TAGS:

hdfgdf

Embed Size (px):

description

Transcript of 3

U5: Responsive Webdesign

Vorteile- Mehr Usability- Mehrere Darstellungen auf versch. Endgeräten- Reichweite erhöhen- Mehr Umsatz- effektivere Suchmaschinenoptimierung- von Überall erreichbar

Nachteile- nur wenig Text oder andere Inhalte einfügbar- mehr Aufwand für Erstellung der Website- langsamere Ladezeit- Ältere Browser verstehen Anweisungen

von responsiv nicht- Dauer der Entwicklung ist höher

Media Query = MedienabfrageEs wird ermittelt, welcher Medientyp (z.B. Bildschirm, Drucker...) der Browser vorfindet. Erfüllt das verwendete Ausgabemedium alle Kriterien einer Medienabfrage, so wird die damit verknüpfte CSS-Ressource eingebunden.

device-width - Geräte BreiteBeschreibt die Breite des Ausgabegerätes, z.B. Breite eines Bildschirms in Pixel. Beispiel:

@media (device-width: 800 px)Breite entspricht genau 800px

width / heightBeschreibt bei fortlaufenden Medien die Breite/Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite/Höhe einer Seite. Beispiel:

@media (width: 60em)Breite entspricht genau 60em

@media (min-width: 50em)Breite beträgt mindesten 50em

@media (max-width: 70em)Breite beträgt maximal 70em

BeachtenAuch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.