CMS - Content Management Systeme

Homepageerstellung



Layout an Bildschirmbreite anpassen

Mit responsiven WEB-Design besteht die Möglichkeit den Webseiteninhalt an die entsprechenden Ausgabegeräte anzupassen.

Durch Media Query Definitionen in der CSS-Datei kann das Webseitenlayout für unterschiedliche Bildschirmbreiten definiert werden:

Mit @media (max-with: ...px) kann das Layout unterhalb einer bestimmten Bildschirmbreite angepasst werden.

Mit @media (min-with: ...px) kann das Layout ab einer bestimmten Bildschirmbreite angepasst werden.

Leider differieren die Bildschirmbreiten für die einzelnen Ausgabegeräte.

Handy Hochformat: ca. 300px - 400px breit 
Handy Querformat: ca. 600px - 850px breit 
IPAD air Hochformat: 820px breit 
IPAD air Querformat: 1180px breit 
IPAD pro Querformat: 1365px breit 
PC Full HD Querformat: 1920px breit 

Die amoto-Homepage verwendet z.B. folgende Media-Query Definitionen:

für Desktopgeräte (PC): 
und IPAD Querformat
keine Einschränkung
der Bildschirmbreite 
für Handy Querformat: @media (max-width: 1360px) { 
body {width: 640px;}
}
für Handy Hochformat: @media (max-width: 610px) { 
body {width: 360px;}
}

(Getestet mit Full HD PC, Handy Samsung A5 und Apple IPAD air / IPAD pro).