Lernkarten

Karten 8 Karten
Lernende 0 Lernende
Sprache Deutsch
Stufe Andere
Erstellt / Aktualisiert 21.02.2021 / 21.02.2021
Lizenzierung Keine Angabe     (zbw)
Weblink
Einbinden
0 Exakte Antworten 8 Text Antworten 0 Multiple Choice Antworten
Fenster schliessen

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)
Fenster schliessen

Erläutere Media Queries?

Lizenzierung: Keine Angabe

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.

Fenster schliessen

Wie ist ein media query aufgebaut und wie wird es ins html integriert?

Lizenzierung: Keine Angabe

<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 ?

 

 

 

 

Fenster schliessen

Was sind in etwa Standardwerte für Phones, Tablets und Desktop?

Lizenzierung: Keine Angabe
Fenster schliessen

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.

 

Fenster schliessen

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;
    }

 

Fenster schliessen

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
Fenster schliessen

Was ist das CSS-Grid?

Lizenzierung: Keine Angabe
  • 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