2.1 Podstawy zapytań multimedialnych
Zapytania multimedialne (media queries) to jeden z kluczowych narzędzi do tworzenia responsywnych stron internetowych. Dzięki nim można dostosować style do różnych urządzeń i rozmiarów ekranów, zapewniając optymalne wyświetlanie i wygodę użytkowania. Poniżej omówimy podstawy użycia zapytań multimedialnych, ich składnię oraz przykłady adaptacji stylów dla różnych ekranów.
Zapytania multimedialne używają reguły @media, która pozwala stosować określone style tylko przy spełnieniu podanych warunków. Warunki mogą obejmować rozmiary ekranu, rozdzielczość, orientację i inne parametry.
Składnia:
@media media-type and (media-feature) {
/* style */
}
Gdzie:
media-type: typ mediów, dla którego będą stosowane style. Najczęściej używa się screenmedia-feature: cechy mediów, takie jak szerokość, wysokość, orientacja itp.
Przykład:
- W tym przykładzie tło strony stanie się jasnoniebieskie, jeśli szerokość ekranu nie przekracza 768 pikseli.
@media screen and (max-width: 768px) {
body {
background-color: lightblue;
}
}
2.2 Typy zapytań multimedialnych
1. Zapytania dotyczące szerokości i wysokości
Te zapytania multimedialne pozwalają zmieniać style w zależności od szerokości i wysokości okna widoku.
Przykłady:
/* Zastosuj style, jeśli szerokość ekranu jest mniejsza niż 768px */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}
/* Zastosuj style, jeśli wysokość ekranu jest większa niż 800px */
@media (min-height: 800px) {
.header {
height: 150px;
}
}
2. Orientacja (orientation)
Zapytania dotyczące orientacji ekranu pozwalają dostosować style w zależności od tego, czy urządzenie jest w trybie portretowym (portrait) czy krajobrazowym (landscape).
Przykłady:
/* Zastosuj style dla orientacji portretowej */
@media (orientation: portrait) {
.sidebar {
display: none;
}
}
/* Zastosuj style dla orientacji krajobrazowej */
@media (orientation: landscape) {
.sidebar {
display: block;
}
}
3. Gęstość pikseli (resolution)
Zapytania dotyczące gęstości pikseli pozwalają dostosować style dla urządzeń z różną gęstością pikseli, takich jak ekrany Retina.
Przykłady:
/* Zastosuj style dla ekranów o gęstości pikseli 2x i wyższej */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url('high-res-image.png');
}
}
/* Zastosuj style dla ekranów o gęstości pikseli mniejszej niż 2x */
@media (max-resolution: 1.99dppx) {
.high-res-image {
background-image: url('standard-res-image.png');
}
}
2.3 Łączenie zapytań multimedialnych
Zapytania multimedialne mogą być łączone za pomocą operatorów logicznych and, not i only.
Przykłady
Użycie operatora and:
/* Zastosuj style dla urządzeń o szerokości ekranu między 600px a 1200px */
@media (min-width: 600px) and (max-width: 1200px) {
.main-content {
margin: 0 auto;
width: 80%;
}
}
Użycie operatora not:
/* Zastosuj style dla wszystkich urządzeń oprócz tych, których szerokość ekranu jest mniejsza niż 600px */
@media not all and (max-width: 600px) {
.footer {
display: block;
}
}
Użycie operatora only:
/* Zastosuj style tylko dla ekranów */
@media only screen and (max-width: 768px) {
.menu {
display: none;
}
}
GO TO FULL VERSION