Responsive Webdesign lernen: Quizfragen und Übungen

Question 1

Welches Framework ist für responsives Webdesign optimiert?

Accepted Answer

Bootstrap

Answer

Angular

Answer

Django

Answer

Java Server Pages

Question 2

Was ist das zentrale Prinzip des responsiven Webdesigns?

Accepted Answer

Flexibles Layout, das sich an die Bildschirmgröße anpasst

Answer

Verwendung von HTML-Tabellen zur Inhaltsdarstellung

Answer

Bereitstellung mehrerer Website-Versionen für verschiedene Geräte

Answer

Design einer Website mit fester Breite

Question 3

Nennen Sie einen Vorteil der Verwendung von Media Queries in responsiven Websites.

Accepted Answer

Zielspezifische Ausrichtung auf bestimmte Geräte oder Bildschirmgrößen

Answer

Vereinfachung der Erstellung separater Layouts für unterschiedliche Geräte

Answer

Verbesserung der Ladezeit der Website

Answer

Ersetzung von modernen Frameworks

Question 4

Welches Attribut legt eine flexible Schriftgröße im responsiven Webdesign fest?

Accepted Answer

font-size

Answer

font-weight

Answer

font-family

Answer

line-height

Question 5

Welche Technik wird speziell für die Implementierung eines Rasterlayouts in einem responsiven Webdesign verwendet?

Accepted Answer

Raster

Answer

Medienanfragen

Answer

Flexbox

Question 6

Welche drei Prinzipien sind für Barrierefreiheit und Benutzerfreundlichkeit im responsiven Webdesign am wichtigsten?

Accepted Answer

Konsistenz, Klarheit, Kompatibilität

Answer

Skalierbarkeit, Responsivität, Leistung

Answer

Sicherheit, Datenschutz, Zugänglichkeit

Question 7

Welche Media-Query sollte verwendet werden, um ein alternatives Stylesheet für Geräte mit einer Breite von weniger als 768 Pixeln zu laden?

Accepted Answer

@media screen and (max-width: 768px)

Answer

@media screen and (min-width: 768px)

Answer

@media (max-width: 768px)

Answer

@media (min-width: 768px)

Question 8

Welche der folgenden Techniken ermöglicht es, responsiven Text zu erstellen?

Accepted Answer

Relative CSS-Einheiten wie rem und em

Answer

Das Viewport-Meta-Tag

Answer

Flexbox

Answer

Grid

Question 9

Welcher Ansatz wird im responsiven Webdesign bevorzugt, um Inhalte für unterschiedliche Bildschirmgrößen zu optimieren?

Accepted Answer

Mobile-First

Answer

Desktop-First

Answer

Tablet-First

Answer

Nur Desktop

Question 10

Welche CSS-Eigenschaft wird verwendet, um den horizontalen Abstand zwischen Elementen anzupassen?

Accepted Answer

margin-left

Answer

margin-top

Answer

padding-left

Answer

padding-top

Question 11

Welches HTML-Element wird verwendet, um einer responsiven Website Navigationsfunktionalität hinzuzufügen?

Accepted Answer

<nav>

Answer

Answer

Answer

<aside>

Question 12

Welches Attribut wird verwendet, um die Breite eines Elements im Responsive Design anzupassen?

Accepted Answer

max-width

Answer

width

Answer

min-width

Question 13

Welche Einheit wird verwendet, um Pixelgrößen unabhängig von der Bildschirmauflösung anzugeben?

Accepted Answer

rem

Answer

px

Answer

vh

Question 14

Welcher Media Query prüft, ob die Höhe des Ansichtsfensters größer als 768px ist?

Accepted Answer

@media screen and (min-height: 768px)

Answer

@media screen and (max-height: 768px)

Question 15

Welches Element wird verwendet, um ein flexibles Raster im Responsive Design zu erstellen?

Accepted Answer

flexbox

Answer

section

Question 16

Welcher Wert eignet sich für die Zentrierung von Text auf mobilen Geräten?

Accepted Answer

center

Answer

left

Question 17

Welcher der folgenden Aspekte ist ein wesentliches Merkmal von Responsive Webdesign?

Accepted Answer

Dynamische Anpassung an verschiedene Bildschirmgrößen

Answer

Kurze Ladezeiten

Answer

Geringes Datenvolumen

Answer

Starre Layouts

Question 18

Welche CSS-Einheit wird verwendet, um die Größe eines Elements relativ zu seinem übergeordneten Element zu definieren?

Accepted Answer

%

Answer

px

Answer

vw

Answer

em

Question 19

Welche Technik wird eingesetzt, um Medieninhalte an unterschiedliche Bildschirmgrößen anzupassen?

Accepted Answer

Media Queries

Answer

Bootstrap

Answer

Flexbox

Answer

CSS Grid

Question 20

Nennen Sie einen Vorteil, der mit Responsive Webdesign verbunden ist.

Accepted Answer

Verbesserte Benutzerfreundlichkeit auf allen Endgeräten

Answer

Geringere Entwicklungskosten

Answer

Höhere Sicherheit

Answer

Bessere Suchmaschinenoptimierung

Question 21

Welche Designphilosophie legt den Schwerpunkt auf die Verwendung von Rastern und Modulen?

Accepted Answer

Modulares Design

Answer

Flüssiges Layout

Answer

Zentriertes Layout

Answer

Responsive Grids

Question 22

Welches Prinzip beschreibt den fließenden Übergang von Elementen zwischen verschiedenen Größen auf einer responsiven Website?

Accepted Answer

Fluidität

Answer

Flexibilität

Answer

Skalierbarkeit

Answer

Adaptivität

Question 23

Welche Technik kann verwendet werden, um die Lesbarkeit von Text auf einer responsiven Website zu gewährleisten?

Accepted Answer

Skalierbare Schriftgrößen

Answer

Bildschirmleser

Answer

Feste Zeilenabstände

Answer

Absolute Positionierung

Question 24

Welcher Best-Practice-Ansatz für responsives Webdesign zielt darauf ab, wiederverwendbare Komponenten zu erstellen?

Accepted Answer

Komponentenbasiertes Design

Answer

Graceful Degradation

Answer

Mobile First

Answer

Progressive Enhancement

Question 25

Welches Tool wird verwendet, um die Reaktionsfähigkeit einer Website auf verschiedenen Geräten zu bewerten?

Accepted Answer

Responsivitätstest

Answer

Usability-Test

Answer

Kompatibilitätstest

Answer

Geschwindigkeitstest

Question 26

Welche CSS-Eigenschaft wird verwendet, um die Breite eines Elements relativ zu seiner Elternelementbreite zu definieren?

Accepted Answer

width: calc(100% - 20px);

Answer

width: fit-content;

Answer

width: fluid;

Answer

width: auto;

Question 27

Welcher Ansatz liefert Inhalte basierend auf der Bandbreite und den Gerätefähigkeiten des Benutzers?

Accepted Answer

Progressive Enhancement

Answer

Mobile First

Answer

Graceful Degradation

Question 28

Welcher Begriff beschreibt den Prozess der Anpassung des Website-Layouts an die physische Ausrichtung eines Geräts?

Accepted Answer

Adaptive Gestaltung

Answer

Responsive Gestaltung

Answer

Flüssiges Layout

Answer

Flexibles Layout

Question 29

Welches CSS-Attribut steuert die Breitenanpassung eines Elements bei sich ändernder Bildschirmgröße?

Accepted Answer

max-width

Answer

margin

Answer

width

Answer

padding

Question 30

Welche Technik wird eingesetzt, um Auflösung und Seitenverhältnis verschiedener Geräte zu erkennen?

Accepted Answer

Media Queries

Answer

SEO

Answer

Flexbox

Answer

Bootstrap

Question 31

Welches Layoutprinzip passt den Inhalt einer Website an verschiedene Bildschirmgrößen an, ohne horizontalen Scrollbalken?

Accepted Answer

Fluid Layout

Answer

Responsive Layout

Answer

Grid Layout

Answer

Fixed Layout

Question 32

Welches Tool dient zur Überprüfung der Reaktionsfähigkeit einer Website auf verschiedenen Geräten?

Accepted Answer

Browser-Entwicklertools

Answer

Web Accessibility Evaluator

Answer

Google PageSpeed Insights

Answer

CSS Validator

Question 33

Welcher Vorteil ergibt sich aus der Verwendung eines CSS-Frameworks für responsives Design?

Accepted Answer

Vereinfachung der Entwicklung

Answer

Verbesserte Leistung

Answer

Höhere Flexibilität

Answer

Geringere Kosten

Question 34

Welche Funktion erfüllt der Robots Meta Tag im Kontext von Responsive Design?

Accepted Answer

Angabe der zu indexierenden Seitenversion für Crawler

Answer

Verbesserung der Seitengeschwindigkeit

Answer

Blockierung des Zugriffs auf die Website für bestimmte Browser

Answer

Festlegung des Seitenlayouts für verschiedene Geräte