nicht angemeldet
Matthias ScharwiesServus!
Hallo,
...dachte, meine Frage wäre, vielleicht einfach zu beantworten... scheint aber wohl nicht so zu sein... zumindest nicht in der Form eines einfachen Lösungsvorschlags...
Willkommen im SELF-Forum, in dem manchmal mehr Antworten kommen als erwartet, sodass dann die Übersicht verloren geht!
Warum nicht? „Arbeite mit 'em' statt 'px'“ ist doch ein einfacher Lösungsvorschlag!
Das Adobe-Tutorial ist gut!
SELFHTML hat im Wiki eines, das versucht die Besonderheiten des responsiven Designs herauszustellen:
Hier werden einfach ein paar Änderungen (die aber meist Vereinfachungen gegenüber früher sind) erklärt:
Gerade Apple versucht, Seiten immer in der Ganze-Seiten-Ansicht darzustellen. Deshalb muss man die Viewport-Angabe setzen:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
Der Begriff em scheint für Anfänger eine "unlogische" Größe zu sein, hilft aber wirklich, da er nicht die angebliche Auflösung des Telefons in Pixel (Bei Retina-Displays gibt's da doppelt so viele, die wieder umgerechnet werden; die Schriftgröße ändert wieder alles) sondern die tatsächlichen Maße, aber eben in einer relativen Einheit, ausdrückt.
Jetzt erst kann man die media queries (aber in em) setzen. Alles untereinander (Mobile first!) und, wenn Platz ist, dann nebeneinander! Anstelle von pixelgenauem Layout lieber Flexbox oder Grid verwenden.
Apropos 768Pixel, Schau dir mal diese Grafik an und versuche passend Viewports zu setzen:
CSS/Tutorials/Einstieg/Media Queries#Breakpoints: Inhalt über Design
Herzliche Grüße
Matthias Scharwies
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim
Matthias Apsel
Gunnar Bittersmann
Tabellenkalk
Auge
JürgenB
Der Martin