Szybkie Kurski - Darmowe kursy technologiczne

1.

Co oznacza RWD (Responsive Web Design)?

Projektowanie stron dla drukarek

Projektowanie stron, które automatycznie dostosowują się do różnych urządzeń

Projektowanie stron statycznych

Projektowanie stron tylko na desktop

2.

Jak zrobić, aby obraz skalował się wraz z kontenerem i nie wychodził poza ekran?

width: 100px; height: 100px

max-width: 100%; height: auto

float: left; width: 100%

position: relative; width: auto

3.

Który warunek media query stosujemy dla ekranów mniejszych niż 600px?

orientation: landscape

min-width: 600px

max-width: 600px

prefers-color-scheme: dark

4.

Jakie podejście oznacza „mobile-first”?

Projektowanie najpierw dla urządzeń mobilnych, potem dla większych ekranów

Projektowanie najpierw dla dużych ekranów, potem dla mniejszych

Projektowanie wyłącznie dla tabletów

Projektowanie dla drukarek

5.

Który warunek media query użyjemy dla trybu ciemnego preferowanego przez użytkownika?

(orientation: portrait)

(min-width: 1024px)

(prefers-color-scheme: dark)

(max-width: 600px)

6.

Co jest głównym celem stosowania elastycznych siatek (fluid grids)?

Umożliwienie automatycznego dopasowania elementów do szerokości ekranu

Tworzenie tła gradientowego

Tworzenie animacji

Ustalenie stałej szerokości elementów w px

7.

Jakie są typowe punkty przełamania (breakpoints) dla tabletów i małych laptopów?

max-width: 480px

max-width: 768px

max-width: 1024px

min-width: 1200px

8.

Jakie jednostki zaleca się używać w RWD zamiast px?

pt, pc

cm, mm

% / em / rem / vw / vh

in, ex

9.

Co należy zrobić, aby testować responsywność strony w przeglądarce?

Otworzyć konsolę F12 → Device Toolbar

Otworzyć menu Plik → Drukuj

Zmienić kolor tła

Włączyć float na wszystkich elementach

10.

Która właściwość CSS pozwala reagować na orientację urządzenia (pionową lub poziomą)?

min-width

max-width

orientation

prefers-color-scheme

Responsywność i media queries