CSS - Responsive Web Design

RWD - treść stara dopasować sie do wyświetlacza

alternatywnie istnieje jeszcze...

ADW - Adaptive Web Design -> desing w którym na sztywno tworzy się szerokość strony przypisaną do przedziałów szerokości ekranu (np. 600, 900, 1200px). To pod tą ograniczoną ilości szerokości tworzony jest layout, a ten jest wyświetlana dla zdefiniowanych przedziałów szerokości ekranu.

Relatywne jednostki

rem- root element odwołuje się do roota, warto wówczas zdefiniować wysokość w html - domyślnie wynosi 16px

html {
    font-size:20px;
}

Reszta w rem i html zmieniać w zależności od wielkości ekranu

em - odnosi się do rodzica, ale w przypadku rozmiaru fontu inne wartości em odwołają się do bieżącej wartości em danego elementu

% - może odwoływać się do różnych wartości, w przypadku szerokości będzie odwoływać się procentowo do rodzica. Ta sama zasada odwołuje się do wielkości fontu, jednak w przypadku wysokości obiektu wówczas będzie odwoływać się do wielkości fontu danego obiektu.

p {
    font-size: 10%;
    line-height: 120%; // 12px
}

vh - view hight -> przyjmuje wysokość wyświetlacza vw- view width -> przyjmuje szerokość wyświetlacza

1vmin = 1% (przyjmie tą wartość która jest mniejsza) 1vmax = 1wv (przyjmie wartość większą)

@media queries - zapytanie o media (ekran)

Ustawienia w html tagu meta w head oraz zdefiniowanie content na width=device-width oznacza, to że treść dopasuje się do szerokości ekranu, na którym dana strona jest przeglądana

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

Zapytanie o wielkość ekranu osoby korzystającej ze strony poprzedzone jest słowem kluczowym @media następnie należy zapisać warunek oraz przypisać konkretne deklaracje do selektorów wskazujące na zachowanie się układu strony w momencie gdy warunek zostanie spełniony

Częścią warunku/reguły może być jedno ze słów kluczowych odwołujących się do urządzenie lub ekranu tv (telewizor), screen (ekran), all (wszystkie), print (drukarki), speech (urządzenia czytające), viewport (ekran/domyślnie) lub inne odwołujące się do jego orientacji pionowej (portrait) lub poziomej (landscape)

orientation=portrait

orientation=landscape

Operatory and/,(or)/not/only

Atrybuty

Przykładowe zastosowanie:

@media (min-width: 1024px) {
    aside {
        width: 16vw;
    }
    }

Łączenie przy pomocy operator and

@media (min-width: 768px) and (max-width: 1024px) {
    main {
        width: 80vw;
        /* left: 25vw; */
    }
    aside {
        width: 20vw;
    }
    aside div {
        padding: 25px 2px;
    }
}

Użycie operatora only oraz wskazanie na jedynie ekrany

    @media only screen and (max-width: 600px) {
    body {
        background-color: gray;
    }
    }

Punkty graniczne -> break points

Punkty, w których zmienia się układ strony dla których należy stworzyć kolejne zapytani

Klasyczne punkty graniczne max-width: 600px (smartfon), 768px (tablet), 992px/1024px(tablet poziomo, małe i starsze laptopy), 1200px(większe ekrany)

CSS

Deklaracje dla poszczególnych szerokości ekranu można przechowywać w osobnych plikach css wówczas należy również dodać właściwość media i wpisanie odpowiedniego warunku w tagu link a następnie przypisać mu konkretny css

<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">

@media queries w Sass

Można warunki wpisać do zmiennej a następnie je interpolować lub stworzenie mixina, który zastępuje media-query (@content)

    @mixin tablet-up {

    @media only screen (min-width: 768px) { @content; }

    }

Źródła:

https://css-tricks.com/viewport-sized-typography/

https://generatedcontent.org/post/21279324555/viewportunits

https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=pl

http://blog.kamilbrenk.pl/meta-tag-viewport-kiedy-i-jak-uzywac/

https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/#:~:text=CSS%20breakpoints%20are%20points%20where,adapts%20to%20the%20screen%20size.

https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp

Pełna lista zapytań zw. z ekranem

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp