nicht angemeldet
Frage zu den Themen in HTML5
Matthias Scharwies
Gunnar BittersmannHallo zusammmen,
aus Spaß habe ich angefangen bei Udemy HTML5/CSS zu lernen. Es läuft wirlich gut, allerding hätte ich zwei Themen gründsätzlich nicht verstanden und zwar die Gridtsystem und Mediaqueries. Könnte mir bitte jemand diese Themen veranschaulichen?
Vielen herzlichen Dank und bitte bleibt gesund!
Ahmad Dardmanesh
-
Servus!
Hallo zusammmen,
aus Spaß habe ich angefangen bei Udemy HTML5/CSS zu lernen. Es läuft wirlich gut, allerding hätte ich zwei Themen gründsätzlich nicht verstanden und zwar die Gridtsystem und Mediaqueries. Könnte mir bitte jemand diese Themen veranschaulichen?
Media queries sind Bedingungen, die vom Browser abgefragt werden.
Im Idealfall ist deine Webseite "Mobile first!" alles untereinander angeordnet. Mit Media queries kannst du (den Browser( überprüfen (lassen), ob der sichtbare Viewport beim Benutzer der Webseite breit genug ist, um Inhalte nebeneinander darstellen zu können.
Früher hatten WebDesigner versucht Boxen pixelgenau zu positionieren. Mit Grid kannst du das dem Browser überlassen. Lies das Tutorial und besonders das 5. Kapitel.
Auf Englisch:
- https://css-tricks.com/thinking-in-behaviors-not-screen-sizes/
- https://css-tricks.com/responsive-grid-magazine-layout-in-just-20-lines-of-css/
Vielen herzlichen Dank und bitte bleibt gesund!
Ahmad Dardmanesh
Herzliche Grüße
Matthias Scharwies
--
25 Jahre SELFHTML → SELF-Treffen 05.-07. Juni 2020 in Mannheim-
@@Matthias Scharwies
Media queries sind Bedingungen, die vom Browser abgefragt werden.
Der Artikel im Wiki ist sehr bildschirmfokussiert, gelinde gesagt. Auf Bildschirme zu reagieren ist ein Anwendungsfall unter vielen.
Mit media queries kann man auch auf andere Ausgabemedien reagieren (z.B. Drucker). Und auch auf Eingabemedien (z.B. Touch, Maus, Stift). Und auf Nutzereinstellungen (z.B. dark mode, keine Bewegung auf Webseiten).
Der Artikel Using media queries im MDN gibt da einen besseren Überblick.
Mit Media queries kannst du (den Browser( überprüfen (lassen), ob der sichtbare Viewport beim Benutzer der Webseite breit genug ist, um Inhalte nebeneinander darstellen zu können.
Hier noch der Hinweis, dass man das bei der Verwendung moderner Layouttechniken (Grid, Flexbox) oft gar nicht braucht. Damit kann man auch ohne media queries auf verschieden große Bildschirme reagieren (intrinsic design).
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)
-
@@Ahmad Dardmanesh
Wenn du Tutorials zu Grid suchst, ist Jen Simmons’ YouTube-Kanal Layout Land was für dich.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
Home Office ist so frustierend, weil man jetzt noch viel stärker bemerkt mit wievielen Menschen man zu tun hat, die nicht sinnerfassend lesen können. (@Grantscheam)