media

media

X

Media

CSS Media Queries je močno orodje za ustvarjanje prilagodljivega (ang. Responsive) dizajna spletnih strani, ki se prilagodi različnim velikostim zaslonov in napravam. Omogočajo vam, da uporabite različne stile za različne naprave in stanje brskalnika, kar zagotavlja boljšo uporabniško izkušnjo. Ključne značilnosti Media Queries:

Omogočajo prilagajanje izgleda strani glede na različne značilnosti naprave, kot so širina zaslona, višina zaslona, orientacija (pokončna ali ležeča), ločljivost in še več.
Določite lahko različne CSS sloge, ki se uporabijo le, ko so določeni pogoji izpolnjeni.
Pogosto se uporablja pristop "Mobile First", kjer se osnovni stili definirajo za mobilne naprave, nato pa se z Media Queries prilagodijo za večje zaslone.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>media</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>
        * {
            box-sizing: border-box;
        }
        .a {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
            width: 25%;
            height: 10vw;
            border-radius: 22px;
            background-color: yellow;
        }
        .a p {
            font-size: 20px;
            font-family: "Times New Roman", serif;
        }
        .b {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            height: 10vw;
            border-radius: 22px;
            background-color: red;
            color: yellow;
        }
        .b p {
            font-size: 60px;
            font-family: "Bookman Old Style", sans-serif;
        }
        @media screen and (max-width: 920px) {
            .a {
                width: 100%;
                border-radius: 22px;
                background-color: red;
                color: yellow;
            }
            .a p {
                font-size: 30px;
                font-family: "Bookman Old Style", sans-serif;
            }
            .b {
                width: 50%;
                height: 10vw;
                background-color: yellow;
                color: red;
            }
            .b p {
                font-size: 20px;
                font-family: "Times New Roman", serif;
            }
        }
        @media screen and (max-width: 540px) {
            .a, .b {
                width: auto;
                height: auto;
                padding: 20px;
            }
        }
    </style>
</head>
<body>
<div class="a">
    <p>Dobrodošli v CSS vadnico!</p>
</div>
<br><br>
<div class="b">
    <p>Dobrodošli v CSS vadnico!</p>
</div>
</body>
</html>