Document

[[oktatas:web:css|< CSS]] ====== Reszponzív weblapok ====== * **Szerző:** Sallai András * Copyright (c) 2022, Sallai András * Szerkesztve: 2023-2024 * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]] * Web: https://szit.hu ===== A reszponzív weboldalakról ===== A reszponzív weboldalak különféle eszközökön optimális megjelenítést biztosítanak. A reszponzív oldalakat a CSS3 media query szabályaival alakítjuk ki. ===== Viewport ===== A viewport segítségével a különböző méretű eszközökön egységes megjelenítést adhatunk. Ezt egyszerűen a HTML oldal fejrészébe másolt következő sorral érhetjük el:

Működés viewport nélkül és viewport-tal: * [[https://szit.hu/m/viewport/]] Ha nincs kéznél telefon, hogy megnézzük, a böngészőben kapcsoljunk fejlesztő felületen telefonos módba. Megfelelő mennyiségű szövegnél a mobil eszköz böngészője kompenzálhat, és olvasható méretben jelenítheti meg a szöveget. Ha viszont van egy fix méretű dobozunk, abban mindenképpen apró marad szöveg viewport nélkül. {{:oktatas:web:css:without_viewport_on_phone.png|}} {{:oktatas:web:css:with_viewport_on_phone.png|}} ===== Média query ===== Szintaktika:


@media only screen and (max/min-width: méret) {
   ...
}

Vagy min-width, vagy a max-width értéket adom meg. Példa


@media only screen and (min-width: 300px) {
   ...
}

Az így megadott beállítások 300px-től érvényesek. Elég így is:


body {
    background-color: aqua;
}

@media (min-width: 300px) {
    body {
        background-color: beige;
    }    
}

==== Egyszerűen ====


@media print {
    body {
        font-family: serif;
    }
}

@media screen {
    body {
        font-family: sans-serif;
    }
}

==== Nyomtatónál ====


body {
    background-color: aqua;
}

@media only print {
    body {
        background-color: beige;
    }    
}

{{:oktatas:web:css:media_lekerdezes_nyomtato.png?400|}} ==== Tájolás figyelése ==== Fekvőtájolás:


@media (orientation: landscape) {
    .doboz {
        background: blue;
    }
}

Álló tájolás:


@media (orientation: portrait) {
    .doboz {
        background: blue;
    }
}

==== Képarányok vizsgálata ==== A szélességem szélesebb mint a magasság.


@media (min-aspect-ratio: 1/1) {
    .doboz {
        background: blue;
    }
}


@media (min-aspect-ratio: 16/9) {
    .doboz {
        background: blue;
    }
}

==== Méret beállítása ====


@media (min-width: 300px) {
    .doboz {
        background: blue;
    }
}

Olvashatóbb:


@media (width >= 300px) {
    .doboz {
        background: blue;
    }
}

==== Tartomány ==== Így tartomány is létrehozható:


@media (100px <= width <= 300px) {
    .doboz {
        background: blue;
    }
}

===== Példa =====





    
    
    Document
    




    Lorem
    
        Lorem ipsum dolor sit amet.


.container {
    background-color: navy;
    color: white;
}

@media only screen and (min-width: 400px) {
    .container {
        background-color: gold;
        color: #333;
    }
}

Élő példa: * https://szit.hu/m/media_query/ ===== Tájolás ===== Ha fekvő alakhoz más beállításokat szeretnénk:


@media only screen and (orientation: landscape) {
   ...
}

Élő példa: * https://szit.hu/m/landspace/ ===== Reszponzív dobozok ===== {{:oktatas:web:css:reszponziv_dobozok.png?400|}} ===== Flex ===== Az eltérő képernyőméreteket a flex dobozokkal is kezelhetjük. Nézzük meg a következő példát:





    
    
    Document
    




    
        doboz 1
        doboz 2
        doboz 3
        doboz 4
        doboz 5
        doboz 6
        doboz 7
        doboz 8
        doboz 9
        doboz 10
        doboz 11
        doboz 12

{{:oktatas:web:css:flex_boxs.png?400|}} Élő példa: * https://szit.hu/m/flex/ ===== Grid =====





    
    
    Grid
    




    
        doboz 1
        doboz 2
        doboz 3
        doboz 4
        doboz 5
        doboz 6
        doboz 7
        doboz 8
        doboz 9
        doboz 10
        doboz 11
        doboz 12

{{:oktatas:web:css:grid_third-auto.png?400|}} Élő példa: * https://szit.hu/m/grid/ ===== Konténer lekérdezés =====


@container (width >= 600px) {
    .doboz {
        background: blue;
    }
}

Lásd még: * https://developer.mozilla.org/en-US/docs/Web/CSS/@container (2024)