szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[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:

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


  * [[https://szit.hu/download/peldak/css/normal.html]]
  * [[https://szit.hu/download/peldak/css/viewport.html]]

<note>
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.

</note>



===== Média query =====

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

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


Példa
<code css>
@media only screen and (min-width: 300px) {
   ...
}
</code>

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


Elég így is:

<code css>
body {
    background-color: aqua;
}

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

==== Egyszerűen ====

<code css>
@media print {
    body {
        font-family: serif;
    }
}

@media screen {
    body {
        font-family: sans-serif;
    }
}
</code>


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

<code css>
body {
    background-color: aqua;
}

@media only print {
    body {
        background-color: beige;
    }    
}
</code>

{{:oktatas:web:css:media_lekerdezes_nyomtato.png?400|}}
===== Példa =====


<code html index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
    <h1>Lorem</h1>
    <p>
        Lorem ipsum dolor sit amet.
    </p>
</div>
    
</body>
</html>
</code>


<code css style.css>
.container {
    background-color: navy;
    color: white;
}

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

É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:

<code css>
@media only screen and (orientation: landscape) {
   ...
}
</code>


É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:

<code html flex.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .container div {
            background-color: aqua;
            width: 200px;
            margin: 20px;
            padding: 10px;
        }
    </style>
</head>
<body>


    <div class="container">
        <div>doboz 1</div>
        <div>doboz 2</div>
        <div>doboz 3</div>
        <div>doboz 4</div>
        <div>doboz 5</div>
        <div>doboz 6</div>
        <div>doboz 7</div>
        <div>doboz 8</div>
        <div>doboz 9</div>
        <div>doboz 10</div>
        <div>doboz 11</div>
        <div>doboz 12</div>
    </div>
    
</body>
</html>
</code>

{{:oktatas:web:css:flex_boxs.png?400|}}

Élő példa:
  * https://szit.hu/download/peldak/css/flex.html

===== Grid =====


<code html grid.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid</title>
    <style>
        #grid {
            display: grid;
            column-gap: 5px;
            row-gap: 5px;
            grid-template-columns: 100px 100px auto;
        }
        .grid-item {
            background-color: aqua;
            padding: 10px;
        }
    </style>
</head>
<body>


    <div id="grid">
        <div class="grid-item">doboz 1</div>
        <div class="grid-item">doboz 2</div>
        <div class="grid-item">doboz 3</div>
        <div class="grid-item">doboz 4</div>
        <div class="grid-item">doboz 5</div>
        <div class="grid-item">doboz 6</div>
        <div class="grid-item">doboz 7</div>
        <div class="grid-item">doboz 8</div>
        <div class="grid-item">doboz 9</div>
        <div class="grid-item">doboz 10</div>
        <div class="grid-item">doboz 11</div>
        <div class="grid-item">doboz 12</div>
    </div>
    
</body>
</html>
</code>

{{:oktatas:web:css:grid_third-auto.png?400|}}

Élő példa:
  * https://szit.hu/download/peldak/css/grid.html
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
