Użycie responsywności

Responsywne projektowanie wymaga również znajomości technologii, takich jak media queries i flexible grid systems. Te technologie pozwalają na dynamiczne dostosowanie wyglądu strony do różnych ekranów. Dlatego warto poznać te technologie i zastosować je w projekcie strony.

Użycie media queries do dostosowania stylów CSS do różnych ekranów:

								
/* Ustawienia dla ekranów o szerokości większej niż 768 pikseli */
@media only screen and (min-width: 768px) {
  .container {
    max-width: 960px;
  }
}

/* Ustawienia dla ekranów o szerokości mniejszej niż 768 pikseli */
@media only screen and (max-width: 767px) {
  .container {
    max-width: 100%;
    padding: 0 15px;
  }
}

Używanie elastycznych układów do dostosowania elementów strony do różnych ekranów:

								
<div class="row">
  <div class="col-md-6 col-sm-12">
    <img src="image.png" alt="Obrazek" />
  </div>
  <div class="col-md-6 col-sm-12">
    <h2>Tytuł</h2>
    <p>Treść</p>
  </div>
</div>

Używanie skalowalnych obrazów do poprawy wydajności strony na urządzeniach mobilnych:

								
<picture>
  <source srcset="image-mobile.jpg" media="(max-width: 767px)" />
  <img src="image.jpg" alt="Obrazek" />
</picture>