Media queries
Media queries są kluczowym rozwiązaniem w tworzeniu responsywnego web designu, pozwalającym na stosowanie różnych stylów CSS w zależności od charakterystyk urządzenia lub okna przeglądarki. Dzięki media queries można dostosować wygląd strony do różnych rozdzielczości ekranów, orientacji urządzeń czy innych warunków.
W dzisiejszym zróżnicowanym świecie technologii, gdzie użytkownicy korzystają z szerokiej gamy urządzeń – od smartfonów, tabletów, laptopów, po monitory komputerowe o różnych rozdzielczościach – odpowiednie wykorzystanie media queries w CSS pozwala na dynamiczną adaptację interfejsu, tak aby strona internetowa wyglądała i funkcjonowała optymalnie na każdym z nich. W praktyce media queries umożliwiają definiowanie reguł i stylów CSS, które zostaną zastosowane tylko w przypadku spełnienia określonych warunków, takich jak szerokość ekranu, wysokość ekranu czy rodzaj urządzenia.
Breakpoints
Breakpoints to punkty graniczne, przy których zmieniają się style CSS. Zazwyczaj odpowiadają one popularnym rozdzielczościom ekranów, takim jak smartfony, tablety czy komputery. Breakpoints można zdefiniować za pomocą wartości min-width, max-width lub innych właściwości w media queries.
Przykład użycia wartości breakpoints:
/* Styl dla ekranów o szerokości mniejszej niż 768px */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}
/* Styl dla ekranów o szerokości większej niż 768px */
@media (min-width: 768px) {
body {
font-size: 16px;
}
}W powyższym przykładzie zastosowano breakpoints, aby dostosować rozmiar czcionki elementu <body> w zależności od szerokości ekranu. Na ekranach o szerokości mniejszej niż 768px, rozmiar czcionki wynosi 14px, podczas gdy na ekranach o szerokości większej niż 768px, rozmiar czcionki zostaje zwiększony do 16px.
min-width
Właściwość min-width pozwala na stosowanie stylów CSS tylko dla urządzeń o szerokości większej niż określona wartość. Jest to przydatne, gdy chcemy, aby strona dostosowywała się do większych ekranów.
Przykład użycia wartości min-width:
@media (min-width: 1024px) {
.container {
width: 80%;
margin: 0 auto;
}
}W powyższym przykładzie zastosowano min-width, aby dostosować szerokość elementu o klasie .container w zależności od szerokości ekranu. Na ekranach o szerokości większej niż 1024px, szerokość elementu .container wynosi 80% szerokości ekranu, a marginesy po bokach są ustawione na automatyczne, aby element był wyśrodkowany. Na ekranach o szerokości mniejszej niż 1024px, style nie są zmieniane.
max-width
Właściwość max-width pozwala na stosowanie stylów CSS tylko dla urządzeń o szerokości mniejszej niż określona wartość. Jest to przydatne, gdy chcemy, aby strona dostosowywała się do mniejszych ekranów.
Przykład:
@media (max-width: 767px) {
.container {
width: 100%;
}
}W powyższym przykładzie zastosowano max-width, aby dostosować szerokość elementu o klasie .container w zależności od szerokości ekranu. Na ekranach o szerokości mniejszej niż 768px, szerokość elementu .container wynosi 100% szerokości ekranu. Na ekranach o szerokości większej niż 767px, style nie są zmieniane.
Device orientation
Media queries pozwalają także na dostosowanie stylów w zależności od orientacji urządzenia (portrait – pionowa, landscape – pozioma). Jest to przydatne, gdy chcemy, aby strona dostosowywała się do zmiany orientacji ekranu na urządzeniach mobilnych.
Przykład:
/* Styl dla urządzeń w orientacji pionowej */
@media (orientation: portrait) {
.container {
background-color: lightblue;
}
}
/* Styl dla urządzeń w orientacji poziomej */
@media (orientation: landscape) {
.container {
background-color: lightgreen;
}
}W powyższym przykładzie zastosowano media queries, aby zmieniać kolor tła elementu o klasie .container w zależności od orientacji urządzenia. Na urządzeniach pionowych kolor tła to jasnoniebieski, a na poziomych – jasnozielony.
Warto zapamiętać
Zastosowanie media queries pozwala na tworzenie responsywnych stron, które dostosowują się do różnych rozdzielczości ekranów, orientacji urządzeń i innych warunków. Dzięki odpowiedniemu wykorzystaniu media queries strony stają się bardziej użyteczne i czytelne, niezależnie od urządzenia, na którym są wyświetlane. Media queries pozwalają na tworzenie spójnych i przyjaznych interfejsów użytkownika, dzięki czemu zaspokajają potrzeby znacznie większej liczby odbiorców. Ważne jest, aby starannie planować i testować media queries, aby zapewnić właściwe działanie strony na różnych urządzeniach i rozdzielczościach ekranów.
Czy ten poradnik był pomocny?
Mateusz Turek
Swoją przygodę z projektowaniem stron internetowych rozpocząłem z kursem od Komputer Świat wydanym w marcu 2003 roku w formie małej książeczki. Na przestrzeni 20 lat zaprojektowałem niezliczoną ilość witryn i aplikacji internetowych. Projektowałem dla małych i dużych firm takich jak Oriflame, Top Market, Bezpieczna Rodzina czy Helping Hand.
