CSS3 - Upit za medije (Media Queries)


Medijski upiti i responzivni web dizajn

Upiti za medije omogućavaju vam da prilagodite prezentaciju svojih web stranica za određeni opseg uređaja kao što su mobilni telefoni, tableti, računari itd. bez ikakvih promjena u oznakama. Medijski upit sastoji se od vrste medija i nula ili više izraza koji se podudaraju s vrstom i uslovima određenih karakteristika medija, kao što su širina uređaja ili rezolucija zaslona. Pošto je medijski upit logičan izraz, može se riješiti ili tačno ili netačno. Rezultat upita bi će istinit ako se vrsta medija navedena u medijskom upitu podudara s vrstom uređaja na kojem se dokument prikazuje, kao i da su zadovoljeni svi izrazi u medijskom upitu. Kada je medijski upit istinit, srodna tabela stila ili pravila stila primjenjuju se na ciljni uređaj. Evo jednostavnog primjera upita za medije za standardne uređaje.

/* Pametni telefoni (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* styles */
}
/* Pametni telefoni (portrait) ---------- */
@media screen and (max-width: 320px){
    /* styles */
}
/* Pametni telefoni (landscape) ---------- */
@media screen and (min-width: 321px){
    /* styles */
}
/* Tableti, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
    /* styles */
}
/* Tableti, iPads (portrait) ---------- */
@media screen and (min-width: 768px){
    /* styles */
}
/* Tableti, iPads (landscape) ---------- */
@media screen and (min-width: 1024px){
    /* styles */
}
/* Računari i laptopovi ---------- */
@media screen and (min-width: 1224px){
    /* styles */
}
/* Veliki ekrani ---------- */
@media screen and (min-width: 1824px){
    /* styles */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS Media Queries</title>
<style>
    /* Pametni telefoni (portrait and landscape) ---------- */
    @media screen and (min-width: 320px) and (max-width: 480px){
        body{
      background: #7ce7e1;
    }
    }
    /* Pametni telefoni (portrait) ---------- */
    @media screen and (max-width: 320px){
        body{
      background: #ffd280;
    }
    }
    /* Pametni telefoni (landscape) ---------- */
    @media screen and (min-width: 321px){
        body{
      background: #9ddfbb;
    }
    }
    /* Tableti, iPads (portrait and landscape) ---------- */
    @media screen and (min-width: 768px) and (max-width: 1024px){
        body{
      background: #ffb497;
    }
    }
    /* Tableti, iPads (portrait) ---------- */
    @media screen and (min-width: 768px){
        body{
      background: #f0e68c;
    }
    }
    /* Tableti, iPads (landscape) ---------- */
    @media screen and (min-width: 1024px){
        body{
      background: #d6b3f4;
    }
    }
    /* Računari i laptopovi ---------- */
    @media screen and (min-width: 1224px){
        body{
      background: #d8ff9d;
    }
    }
    /* Veliki ekrani ---------- */
    @media screen and (min-width: 1824px){
        body{
      background: #ffc0cb;
    }
    }
</style>
</head>
<body>
    <h1>CSS Media Queries</h1>
    <p>Pozadina izlaznog područja je različita na različitim medijima ili uređajima</p>
    <p><strong>Alternativa:</strong> Učinak ovog medijskog upita
    možete vidjeti i otvaranjem izlaza u novom prozoru i promjenom
    veličine u pretraživača.</p>
</body>
</html>


Promjena širine kolone na osnovu veličine ekrana

Možete koristiti CSS medijski upit za promjenu širine web stranice i srodnih elemenata kako biste korisniku ponudili najbolje iskustvo gledanja na različitim uređajima. Sljedeća pravila stila automatski će promijeniti širinu elementa kontejnera zavisno o veličini zaslona ili prozora. Na primjer, ako je širina okvira za prikaz manja od 768 piksela, pokrivat će 100% širine okvira za prikaz, ako je veća od 768 piksela, ali manja od 1024 piksela, bit će široka 750 piksela, i tako dalje.

.container {
    margin: 0 auto;
    background: #f2f2f2;
    box-sizing: border-box;
}
/* Mobilni uređaji (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
    .container {
        width: 100%;
        padding: 0 10px;
    }
}
/* Tableti i iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
    .container {
        width: 750px;
        padding: 0 10px;
    }
}
/* Računari i laptopovi male rezolucije ---------- */
@media screen and (min-width: 1024px) {
    .container {
        width: 980px;
        padding: 0 15px;
    }
}
/* Računari i laptopovi visoke rezolucije ---------- */
@media screen and (min-width: 1280px) {
    .container {
        width: 1200px;
        padding: 0 20px;
    }
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer promjene širine elementa pomoću CSS medijskih upita (CSS Media Queries)</title>
<style> 
.container {
    margin: 0 auto;
    background: #ceceff;
    box-sizing: border-box;
}
/* Mobilni telefoni (portrait and landscape) ---------- */
@media screen and (max-width: 767px){
    .container {
        width: 100%;
        padding: 5px 10px;
    }
}
/* Tableti i iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
    .container {
        width: 750px;
        padding: 5px 10px;
    }
}
/* Računari i laptopovi male rezolucije ---------- */
@media screen and (min-width: 1024px) {
    .container {
        width: 980px;
        padding: 5px 15px;
    }
}
/* Računari i laptopovi visoke rezolucije ---------- */
@media screen and (min-width: 1280px) {
    .container {
        width: 1200px;
        padding: 5px 20px;
    }
}
</style>
</head>
<body>
  <div class="container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
    metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum 
    id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
    varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum 
    vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
    aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum
    eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
    interdum neque porttitor. Integer faucibus ligula.</p>

    <p>Quis quam ut magna consequat faucibus. Pellentesque
    eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
    Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
    Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
    auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
    vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
    quam tortor, commodo ac dui quis, bibendum viverra erat. 
    Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
    Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
  </div>
</body>
</html>                                    


Promjena rasporeda na osnovu veličine zaslona

Možete koristiti i CSS medijski upit za malo prilagođavanje i prilagođavanje izgleda web stranice sa više kolona za uređaje. Sljedeće pravilo stila će stvoriti raspored s dve kolone, ako je veličina okvira za prikaz veća ili jednaka 768 piksela, ali ako je manja od toga prikazat će se kao jedan izgled kolone.

.column {
    width: 48%;
    padding: 0 15px;
    box-sizing: border-box;
    background: #93dcff;
    float: left;
}
.container .column:first-child{
    margin-right: 4%;
}
@media screen and (max-width: 767px){
    .column {
        width: 100%;
        padding: 5px 20px;
        float: none;
    }
    .container .column:first-child{
        margin-right: 0;
        margin-bottom: 20px;
    }
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer izrade responzivnog izgleda pomoću CSS medijskih upita (CSS Media Queries)</title>
<style> 
.column {
    width: 48%;
    padding: 0 15px;
    box-sizing: border-box;
    background: #97ddff;
    float: left;
}
.container .column:first-child{
    margin-right: 4%;
}
@media screen and (max-width: 767px){
    .column {
        width: 100%;
        padding: 5px 20px;
        float: none;
    }
    .container .column:first-child{
        margin-right: 0;
        margin-bottom: 20px;
    }
}
</style>
</head>
<body>
  <div class="container">
    <div class="column">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna 
            metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse
            varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum
            vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id 
            interdum neque porttitor. Integer faucibus ligula.</p>

        </div>
    <div class="column">
            <p>Quis quam ut magna consequat faucibus. Pellentesque 
            eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. 
            Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. 
            Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus 
            auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam 
            vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce 
            quam tortor, commodo ac dui quis, bibendum viverra erat. 
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. 
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
        </div>
  </div>
</body>
</html>