Document

[[oktatas:web:css|< CSS]] ====== Reszponzív weblapok ====== * **Szerző:** Sallai András * Copyright (c) 2022, Sallai András * Utoljára szerkesztve: 2023 * 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:

* [[https://szit.hu/download/peldak/css/normal.html]] * [[https://szit.hu/download/peldak/css/viewport.html]] 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. ===== 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|}} ===== 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/download/peldak/css/media_query.html ===== 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/download/peldak/css/landspace.html ===== 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/download/peldak/css/flex.html ===== 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/download/peldak/css/grid.html