Reaktionsfähiges Webdesign lernen: Grundlagen, Media Queries, Flexbox, Grid-Layout

Question 1

Mit welcher CSS-Eigenschaft wird die horizontale Breite eines Elements festgelegt?

Accepted Answer

width

Answer

height

Answer

margin

Answer

padding

Question 2

Welche Eigenschaft dient in Flexbox zur Steuerung des Abstands zwischen Elementen?

Accepted Answer

gap

Answer

margin

Answer

padding

Answer

align-items

Question 3

Welches Element wird zur Steuerung der Anzeige von Inhalten in unterschiedlichen Bildschirmgrößen verwendet?

Accepted Answer

Media Queries

Answer

CSS Sprites

Answer

Flexbox

Answer

Grid-Layout

Question 4

Was ist der Hauptzweck des Grid-Layouts?

Accepted Answer

Anordnung von Elementen in einer zweidimensionalen Struktur

Answer

Erstellung responsiver Layouts

Answer

Festlegung von Elementgrößen

Answer

Verbesserung der Seitengeschwindigkeit

Question 5

Welcher Ansatz eignet sich am besten für die Erstellung responsiver Websites?

Accepted Answer

Responsives Layout

Answer

Festes Layout

Answer

Fluides Layout

Answer

Adaptives Layout

Question 6

Welche Einheit wird in Media Queries verwendet, um die Breite des Anzeigebereichs anzugeben?

Accepted Answer

vw

Answer

px

Answer

em

Answer

rem

Question 7

Welches Attribut definiert die Anzahl der Spalten in einem Grid-Layout?

Accepted Answer

grid-template-columns

Answer

grid-columns

Answer

grid-rows

Answer

grid-template-rows

Question 8

Was ist das Hauptziel von Responsive Webdesign?

Accepted Answer

Erstellung von Websites, die auf allen Geräten optimal dargestellt werden

Answer

Verbesserung der Ladegeschwindigkeit von Websites

Answer

Erhöhung der Benutzerfreundlichkeit

Answer

Reduzierung der Entwicklungskosten

Question 9

Welcher Flexbox-Wert lässt Elemente proportional zu ihrem Inhalt wachsen?

Accepted Answer

flex

Answer

auto

Answer

1

Answer

0

Question 10

Welche Technik passt Bilder an unterschiedliche Bildschirmgrößen an?

Accepted Answer

Adaptive Bilder

Answer

CSS Sprites

Answer

SVG

Answer

Media Queries

Question 11

Welche Art von Media Query wird verwendet, um die Bildschirmauflösung zu prüfen?

Accepted Answer

@media screen

Answer

@media print

Answer

@media query

Answer

@media monitor

Question 12

Welches CSS-Attribut wird verwendet, um die Skalierung von Hintergrundbildern zu steuern?

Accepted Answer

background-size

Answer

background-scale

Answer

image-size

Answer

scale-image

Question 13

Welche Methode wird in HTML verwendet, um die Höhe und Breite eines Elements festzulegen?

Accepted Answer

height und width

Answer

style

Answer

size

Answer

dimensions

Question 14

Welches Grid-Layout-Attribut definiert die Anzahl der Spalten in einem Raster?

Accepted Answer

grid-template-columns

Answer

grid-columns

Answer

grid-rows

Answer

grid-template-areas

Question 15

Welche CSS-Eigenschaft wird verwendet, um den Abstand zwischen Buchstaben in einem Text zu vergrößern?

Accepted Answer

letter-spacing

Answer

word-spacing

Answer

text-spacing

Answer

line-spacing

Question 16

Welches HTML-Element wird verwendet, um einen Link zu definieren?

Accepted Answer

a

Answer

link

Answer

href

Answer

hyperlink

Question 17

Welche Technik im Responsive Webdesign ermöglicht die Definition mehrerer CSS-Regelsets für unterschiedliche Bildschirmgrößen?

Accepted Answer

Media Queries

Answer

CSS-Präprozessoren

Answer

Flexbox

Answer

Grid-Layout

Question 18

Welcher der folgenden Vorteile ist mit der Verwendung von Grid-Layout verbunden?

Accepted Answer

Einfache Erstellung komplexer Layouts

Answer

Breite Browserunterstützung

Answer

Geringe Dateigröße

Answer

Kurze Ladezeiten

Question 19

Welcher ist ein typischer Anwendungsfall für Media Queries?

Accepted Answer

Anpassung des Layouts an die Bildschirmgröße

Answer

Behebung von Browserproblemen

Answer

Speicherung von Benutzerdaten

Answer

Beschleunigung der Ladezeiten

Question 20

Welcher Media Query-Typ überprüft die verfügbare Anzeigebreite?

Accepted Answer

(min-width)

Answer

(min-aspect-ratio)

Answer

(max-resolution)

Answer

(max-height)

Question 21

Welchen Vorteil bietet die Verwendung von Flexbox in Responsive Webdesign?

Accepted Answer

Ermöglicht eine flexible Anordnung von Elementen auf verschiedenen Bildschirmgrößen.

Answer

Reduziert die Komplexität des HTML-Codes.

Answer

Verbessert die Ladegeschwindigkeit der Website.

Question 22

Welches Grid-System-Attribut definiert die Anzahl der Spalten in einer Grid-Zeile?

Accepted Answer

grid-template-columns

Answer

grid-column-start

Answer

grid-auto-flow

Answer

grid-gap

Question 23

Welche Technik wird verwendet, um optimierte Bilder für verschiedene Geräte bereitzustellen?

Accepted Answer

SRCSet

Answer

CSS-Sprites

Answer

Flexible Bilder

Answer

Media Queries

Question 24

Was ist das primäre Ziel von Responsive Webdesign?

Accepted Answer

Bereitstellung einer optimalen Benutzererfahrung auf verschiedenen Bildschirmgrößen und Geräten.

Answer

Reduzierung der Ladezeiten von Websites

Answer

Erstellung statischer Websites, die auf jedem Gerät gleich aussehen.

Question 25

Welcher CSS-Selektor wird verwendet, um Elemente basierend auf ihrer Anzeigeeigenschaft abzufragen?

Accepted Answer

@media()

Answer

@window()

Answer

@device()

Answer

@screen()

Question 26

Wie wird in Flexbox der Abstand zwischen Elementen geregelt?

Accepted Answer

gap

Answer

space

Answer

margin

Answer

padding

Question 27

Welchen Vorteil bietet die Verwendung von Grids in Responsive Webdesign?

Accepted Answer

Ermöglicht eine präzise Steuerung des Layouts auf verschiedenen Bildschirmgrößen.

Answer

Verbessert die Zugänglichkeit der Website.

Answer

Reduziert die Komplexität des Codes.

Question 28

Was ist der Zweck des Breakpoint-Konzepts?

Accepted Answer

Definition von Schwellenwerten, bei denen sich das Design einer Website anpasst.

Answer

Sicherstellung der Kompatibilität mit allen Browsern.

Answer

Festlegung von Farben und Schriftarten für verschiedene Gerätetypen.

Question 29

Welches HTML-Attribut wird verwendet, um die Reaktionsfähigkeit von Bildern zu steuern?

Accepted Answer

srcset

Answer

adaptive

Answer

responsive

Answer

versatile

Question 30

Welche CSS-Eigenschaft ermöglicht es, abhängig von der Bildschirmgröße unterschiedliche Styles anzuwenden?

Accepted Answer

@media

Answer

screen

Answer

width

Answer

resolution

Question 31

Welche der folgenden Layout-Methoden ist ideal für die Erstellung flexibler Layouts, die sich an verschiedene Bildschirmgrößen anpassen?

Accepted Answer

Flexbox

Answer

Inline-Block

Answer

Table

Answer

Float

Question 32

Welches CSS-Attribut wird verwendet, um die horizontale Ausrichtung von Elementen innerhalb eines Grid-Containers zu steuern?

Accepted Answer

justify-content

Answer

grid-template-rows

Answer

align-content

Answer

grid-column-gap

Question 33

Wie viele Spalten werden in einem Grid-Layout mit der Deklaration 'grid-template-columns: repeat(3, 1fr);' erstellt?

Accepted Answer

3

Answer

4

Answer

1

Answer

2

Question 34

Welche Technik wird verwendet, um sicherzustellen, dass ein Bild bei unterschiedlichen Bildschirmgrößen optimal dargestellt wird, ohne an Qualität zu verlieren?

Accepted Answer

Responsive Images

Answer

Image Optimization

Answer

Image Cropping

Answer

Image Scaling

Question 35

Welche Eigenschaft wird verwendet, um die maximale Breite eines Elements in einem responsiven Layout festzulegen?

Accepted Answer

max-width

Answer

flex-grow

Answer

width

Answer

min-width

Question 36

Welcher Zweck erfüllt das 'viewport meta tag' in HTML?

Accepted Answer

Die Größe und Skalierung einer Webseite auf mobilen Geräten zu definieren.

Answer

Die Navigation auf einer Webseite zu verbessern.

Answer

Die Schriftgröße für alle Geräte anzupassen.

Question 37

Welches Tool hilft Ihnen dabei, die Darstellung Ihrer Webseite auf verschiedenen Geräten zu simulieren?

Accepted Answer

Browser Developer Tools

Answer

Webserver

Answer

Code Editor

Answer

Text Editor

Question 38

Welche der folgenden Methoden ist KEIN Bestandteil von Responsive Webdesign?

Accepted Answer

Verwendung einer festen Breite für alle Elemente.

Answer

Änderung der Schriftgröße

Answer

Anpassung von Inhaltslayouts

Question 39

Welcher Media Query-Parameter überprüft die Breite des Anzeigefensters?

Accepted Answer

(max-width)

Answer

(min-width)

Answer

(max-height)

Answer

(min-height)

Question 40

Welche CSS-Eigenschaft wird verwendet, um Elemente auf einer horizontalen Achse anzuordnen?

Accepted Answer

display: flex

Answer

display: block

Answer

display: grid

Answer

display: inline

Question 41

Welche Grid-Eigenschaft legt die Anzahl der Spalten in einem Grid-Container fest?

Accepted Answer

grid-template-columns

Answer

grid-template-rows

Answer

grid-auto-flow

Answer

grid-gap

Question 42

Welcher der folgenden Vorteile ergibt sich aus der Verwendung von Responsive Webdesign?

Accepted Answer

Verbesserte Benutzererfahrung auf verschiedenen Geräten

Answer

Geringerer Wartungsaufwand

Answer

Höhere Ladegeschwindigkeiten

Question 43

Welche Einheit ermöglicht die automatische Anpassung der Schriftgröße an die Größe des Anzeigefensters?

Accepted Answer

vw

Answer

em

Answer

%

Answer

rem

Question 44

Welche Eigenschaft wird verwendet, um Elemente auf einer vertikalen Achse auszurichten?

Accepted Answer

justify-content

Answer

align-content

Answer

flex-direction

Answer

align-items

Question 45

Welcher Browser führte Responsive Webdesign als erstes ein?

Accepted Answer

Opera Mini

Answer

Firefox

Answer

Internet Explorer

Answer

Safari

Question 46

Welches Tool wird verwendet, um die Reaktionsfähigkeit einer Website zu testen?

Accepted Answer

BrowserStack

Answer

Pingdom

Answer

Google Analytics

Question 47

Welche Methode wird verwendet, um die Position von Elementen in einem Grid-Container festzulegen?

Accepted Answer

grid-column

Answer

grid-area

Answer

grid-row

Answer

grid-gap

Question 48

Welches Framework eignet sich gut für die Entwicklung responsiver Websites?

Accepted Answer

Bootstrap

Answer

jQuery

Answer

React

Answer

Angular

Question 49

Welche Eigenschaft wird in Media Queries verwendet, um den Breakpoint für die Anpassung des Layouts zu definieren?

Accepted Answer

min-width

Answer

margin-top

Answer

max-height

Answer

font-size

Question 50

Welches Layout-Modell bietet eine flexible Möglichkeit, Elemente horizontal und vertikal anzuordnen?

Accepted Answer

Flexbox

Answer

CSS Grid

Answer

Grid

Answer

Bootstrap

Question 51

Welche CSS-Eigenschaft wird verwendet, um den verfügbaren Speicherplatz in einer Flexbox-Zeile oder -Spalte gleichmäßig auf die darin enthaltenen Elemente zu verteilen?

Accepted Answer

flex-grow

Answer

flex-wrap

Answer

flex-basis

Answer

flex-shrink

Question 52

Welche Einheit wird verwendet, um den Abstand zwischen Elementen im CSS Grid-Layout festzulegen?

Accepted Answer

fr

Answer

px

Answer

%

Question 53

Welcher Media Query-Typ wird verwendet, um zu überprüfen, ob ein Benutzer eine Druckfunktion ausführt?

Accepted Answer

print

Answer

screen

Answer

all

Answer

hover

Question 54

Welche CSS-Eigenschaft wird verwendet, um den Abstand zwischen dem Rand eines Elements und seinem Inhalt festzulegen?

Accepted Answer

padding

Answer

margin

Answer

outline

Answer

border

Question 55

Welches Tool wird häufig verwendet, um die Reaktionsfähigkeit einer Website zu testen?

Accepted Answer

Browser DevTools

Answer

Web Performance Tester

Answer

Google PageSpeed Insights

Question 56

Welches Prinzip des responsiven Webdesigns zielt darauf ab, eine optimale Benutzererfahrung auf allen Geräten zu bieten?

Accepted Answer

Mobile First

Answer

Desktop First

Answer

Adaptive Design

Question 57

Welche CSS-Eigenschaft wird verwendet, um die Schriftgröße anzupassen, wenn die Größe des Ansichtsfensters variiert?

Accepted Answer

vw

Answer

vmin

Answer

vh

Question 58

Welcher Begriff beschreibt die Fähigkeit einer Website, Inhalte auf dem Bildschirm an verschiedene Auflösungen anzupassen?

Accepted Answer

Skalierbarkeit

Answer

Anpassungsfähigkeit

Answer

Flexibilität

Answer

Reagibilität