Responsywność w CSS

Wprowadzenie

Responsywność w CSS odnosi się do zdolności strony internetowej do dynamicznego dostosowywania się do różnych rozmiarów ekranu i urządzeń, takich jak komputery stacjonarne, laptopy, tablety i smartfony. Dzięki responsywnemu projektowaniu, strona może oferować optymalne wrażenia użytkownika niezależnie od tego, jak jest wyświetlana.

Media Queries

Podstawowym narzędziem do tworzenia responsywnego designu w CSS są tzw. "media queries". Pozwalają one na zastosowanie różnych stylów w zależności od charakterystyki urządzenia, takich jak szerokość ekranu, orientacja i rozdzielczość.

Przykład: Zmiana stylu na różnych szerokościach ekranu

Możesz użyć media queries, aby zastosować różne style w zależności od szerokości ekranu.

1/* Style dla ekranów o szerokości 600px lub większej */
2@media (min-width: 600px) {
3  .container {
4    width: 80%;
5    margin: 0 auto;
6  }
7}
8
9/* Style dla ekranów o szerokości mniejszej niż 600px */
10@media (max-width: 599px) {
11  .container {
12    width: 100%;
13    padding: 10px;
14  }
15}

W powyższym przykładzie, dla ekranów o szerokości 600px lub większej, kontener ma szerokość 80% i wyśrodkowane marginesy. Dla ekranów o szerokości mniejszej niż 600px, kontener ma pełną szerokość i dodatkowe wypełnienie.

Przykład: Zmiana kierunku układu dla tabletów i smartfonów

Możesz również użyć media queries w połączeniu z Flexbox, aby zmienić układ w zależności od rozmiaru ekranu.

1.container {
2  display: flex;
3  flex-direction: row; /* Domyślny układ dla większych ekranów */
4}
5
6/* Dla ekranów o szerokości mniejszej niż 768px, zmiana kierunku na kolumnę */
7@media (max-width: 768px) {
8  .container {
9    flex-direction: column;
10  }
11}

W tym przypadku, dla ekranów o szerokości mniejszej niż 768px, kierunek układu zostaje zmieniony na kolumnę.

Podsumowanie

Responsywność w CSS jest kluczowa w tworzeniu stron internetowych, które wyglądają i działają dobrze na różnych urządzeniach i rozmiarach ekranu. Za pomocą media queries można elastycznie dostosować wygląd strony do różnych warunków, zapewniając tym samym doskonałą jakość prezentacji i użytkowania na różnych platformach.