Informacje ogólne

/* Na samym wstępie pamiętaj aby wstawić do header-a meta dana:

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

w VisiualStudio Code wystarczy wpisac:
meta:vp + TAB i się samo uzupełni. Polecenie to wprowadzi nam któtszy zapis viewport-a:

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

, a różni się to tylko tym, że przy krótszym zezwalamy użytkownikowi na skalowanie naszej strony, czyli przybliżanie i oddalanie. /*


@media (orientation: portrait){
    /* układ pionowy */
}

@media (orientation: landscape){
    /* układ poziomy */
}

/* from getbootstrap */


/*

    UWAGA !!!
    Bardzo dobrą praktyką jest stosowanie breakpoint-ów z właściwością min-width dla poszczególnych rozdzielczości

*/

// 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) { ... }



/*

---------------------------------
Dobrą praktyką jest także podzielenie sobie dokumentu .css na etapy, czyli:
1. etap budowanie strony,
2. media query
3. animacje
4. pamiętaj aby ustawić box-sizing: border-box (domyślnie jest content-box, ale nie jest ona rekomendowana).
*/