WebTech - Wolf 13
Grundlagen
Grundlagen
Kartei Details
| Karten | 8 |
|---|---|
| Sprache | Deutsch |
| Kategorie | Informatik |
| Stufe | Andere |
| Erstellt / Aktualisiert | 21.02.2021 / 21.02.2021 |
| Weblink |
https://card2brain.ch/box/20210221_webtech_wolf_13
|
| Einbinden |
<iframe src="https://card2brain.ch/box/20210221_webtech_wolf_13/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Was bedeutet responsive Webdesign auch responsive Layout?
- Eigenschaften des Endgerätes werden berücksichtigt (Media queries), Inhalt der Website wird entsprechend angepasst.
- responsiv bedeutet "ragierend"
- Regel: Mobile first!
- Hauptkriterien:
- ist die Bildschirmgrösse (width)
- Eingabemethoden (Maus oder Touchscreen)
Erläutere Media Queries?
Media Queries (auf Deutsch: "Medienabfragen") sind eine CSS3 Funktion, die es ermöglicht, die Darstellung eines Dokuments für verschiedene Ausgabemedien festlegen. Die Darstellung wird dabei anhand bestimmter Bedingungen wie dem Medientyp, der Ausrichtung des Displays oder der Bildschirmauflösung angepasst. Media Queries sind seit Juni 2012 ein vom World Wide Web Consortium (W3C) empfohlener Standard für das Responsive Webdesign.
Wie ist ein media query aufgebaut und wie wird es ins html integriert?
<head>
<link rel="stylesheet" href="css/asis.css">
<link rel="stylesheet" media"screen and (max-width:480px)" href="css/mobile.css">
Erläuterung:
- hier wird das mobile.css nur dann verwendet, wenn die maximale Bildschirmbreite von 480px nicht überschritten wird
- Bei geräten mit einer höheren Auflösung wird basis.css
1. Notation innerhalb eines <style>-Tags:
<style type="text/css" media="screen and (max-width: 480px)"></style>
2. Notation innerhalb des css stylesheets:
@media screen and (max-width: 480px) {
- .class { }
- #xy{ }
}
3. Notation durch @import- @ media-Regel im html link oder style element ?
Was sind in etwa Standardwerte für Phones, Tablets und Desktop?
Was ist ein Viewport?
- Viewport (deutsch: Sichtfenster, Sichtöffnung)
- Größe des zur Verfügung stehenden Displays auf mobilen Endgeräten bezeichnet
- Es dient dazu, die Größe des Displays optimal auszunutzen, indem der anzuzeigende Inhalt skaliert wird.
- Das Metaelement Viewport sorgt dafür, dass der Inhalt korrekt und vor allem vollständig und gut lesbar dargestellt wird.
- kann man mit width und height ansprechen.
Wie verwendet man den Metatag "Viewport"?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width: sie setzen die Breite des Layout-Viewportes auf die Breite des visuellen Viewports
--> somit muss man sich nicht mehr um die verschiedenen Displaygrössen kümmern - initial-scale:1.0: anfänglicher Zoom ist auf 100% resp. 1:1
Alternative Vorgehensweise:
@viewport in CSS
- @viewport {
width: deice-width;
zoom: 1;
}
Wieso verwendet man für einen Layoutumbruch in Media Queries die EInheit "em" und nicht "px"?
- Vorteil: die Medienabfrage funktioniert dann auch bei einer Schriftgrössenänderung über das Betriebssystem korrekt.
- pixel / 16 = em
Was ist das CSS-Grid?
- man erstellt ein Raster in einem Eltern-Element und positioniert darin die Kind-Elemente
- Eltern Element benötigt folgende Eigenschaft zugewiesen:
- display: grid
- grid-template-columns: 150px auto auto 100px; --> Zeilenhöhe
- grid-template-rows: 20% 20% 20% 20% 20%; --> alle 5 Spalten sind 20%
- das grid wird im CSS mit dem Klassenselektor .grid angesprochen mit Bezug auf Elternelement html
-
- 1 / 8
-
