+- Joopi (https://forum.hermann-splitthoff.de)
+-- Forum: Wissenswertes (https://forum.hermann-splitthoff.de/forumdisplay.php?fid=1)
+--- Forum: Programmieren (https://forum.hermann-splitthoff.de/forumdisplay.php?fid=6)
+--- Thema: [CSS] Mediascreen ermitteln und nutzen (/showthread.php?tid=111)
Mediascreen ermitteln und nutzen - Joopi - 08-01-2023
Ich möchte gerne mein eigenes responsives Design aufbauen, um mein Intranet Version 3 besser nutzbar zu machen und auch mal über das Tablet oder Smartphone nutzen zu können. Es ist nicht gerade einfach, ein resposives Layout mit allen grundlegenden Notwendigkeit zu erstellen.
Bei der Konzeption des CSS3-Codes müssen die Bildschirmgrößen beachtet, angegeben und mit CSS-Code belegt werden. Diese Medienangaben beziehen sich auf maximale Größen der Bildschirme, also der Ausgabegeräte. Ist nichts angegeben, so nimmt das Programm die volle Breite des Ausgabegerätes. Alles andere, was eingeschränkt ist, wird entsprechend anders dargestellt und die Blocks rutschen ineinander oder werden komplett anders dargestellt. Bei Navigationsleisten passiert das oftmals.
Gängige Größe der Bildschirm nach der normalen Auflösung sind:
- @media screen and (max-width: 1280px)
- @media screen and (max-width: 980px)
- @media screen and (max-width: 736px)
- @media screen and (max-width: 480px)
Damit sollte alle zur Zeit gängigen Bildschirmeformate abgedeckt sind.
Um ein responsives Layout zu erhalten, in dem auch die Navigation noch gewährleistet ist, werde ich wahrscheinlich auf Bootstrap zurückgreifen müssen. Dieses wird auch von w3schools propagiert. Derzeit versuche ich über mein Buch, welches leider schon älter ist, die grundlegenden Informationen und Kenntnisse zu erhalten.
Im Kopfbereich einer HTML-Seite muss folgendes notiert werden:
Code:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">Diese Information habe ich aus meinen etwas älteren Buch über responsives Design.
Aus einem neueren Template habe ich folgenden Eintrag gefunden, aus dem auch die obigen Bildschirmgrößen kommen:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />