Reaģējošs Web dizains – mediju vaicājumi

Mediju vaicājums (Media query) ir CSS metode, kas ieviesta CSS3. Tajā tiek izmantots @media noteikums, lai iekļautu noteiktas CSS īpašības tikai tad, ja konkrēts nosacījums ir pareizs.

Piemēram, ja pārlūkprogrammas logs ir 900 vai mazāk, fona krāsa būs zaļa:

@media only screen and (max-width: 900px) {
  body {
    background-color: green;
  }
}

Sasaistot ar Flexbox izkārtojuma tehniku:

.kolonas{
        display: flex; 
        justify-content: space-between; 
      }

Jāveido CSS tā, lai pie maziem ekrāna izmēriem augstāk minētās rindiņas netiktu lietotas un tādā gadījumā elementi būs viens zem otra vertikāli.

.kolonas{
        max-width: 1200px;
        margin: 0 auto;
      }

      @media (min-width: 900px){
        .kolonas{
          display: flex;
          justify-content: space-between; 
        }
      }

Un obligāti jāiekļauj šāda rindiņa <head> sadaļā:

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