Responsive Web Design (RWD) – jak go użyć?

Posted on by

Sekcja head

Na wstępie pamiętaj aby dodać meta:viewport do sekcji head

<meta name="viewport" content="width=device-width, initial-scale=1.0">

plik .css

Na wstępie warto powiedzieć, że dobrą praktyką jest podzielić sobie dokument na kilka podstawowych części. Te części to inaczej szerokość urządzenia na której będzie wyświetlana strona. Bardzo dobrym przykładem jest biblioteka Bootstrapa – https://getbootstrap.com/docs/4.4/layout/overview/#responsive-breakpoints, która korzysta z podziału na 4 sekcje:

@media (min-width: 320px) {  }

/* Extra small devices (portrait phones, less than 576px)
   No media query for `xs` since this is the default in Bootstrap

   Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

Gdy dokument robi się zbyt długi warto również skorzystać z możliwości importowania plików css.

@import "url";
@import "url"media1,media2,...;
@import url("url");
@import url("url")media1;

Możemy jeszcze bardziej sprecyzować to pod jaki wyświetlacz przystosowujemy stronę, np:
zależy Nam aby stworzyć kod dla telefonu, powyżej szerokości ekranu 600px oraz w orientacji poziomej:

@media (min-width: 600px) and (orientation: landscape) { ... }

lub dla orientacji pionowej o szerokości min 320px

@media (min-width: 320px) and (orientation: portrait) { … }

Tych możliwości jest naprawdę dużo i nie ma sensu tego powielać. Zapraszam do dokumentacji https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries