Kai mes pradedame visiškai pasaulyje
reaguojantis dizainas svarbu žinoti, kokios yra naujos taisyklės
CSS3, tai padeda mums aptikti ekrano, kuriame peržiūrima svetainė ar programa, matmenis.
Viena iš šių taisyklių yra
@pusė, kuris, tinkamai derinant sąlygas, leidžia mums žinoti ekrano dydį ir, atsižvelgiant į rezultatą, imtis atitinkamų veiksmų dėl jo dizaino.
Naudojant žiniasklaidos užklausas
Sukurkime kodą
HTML paprasta ir mes ketiname įtraukti savo stiliaus lapą, kuriame bus mūsų taisyklės
reiškia norą, Pažiūrėkime:
Nustatykite ekrano matmenis
Kaip matome, tai gana paprastas kodas, tačiau reikia pabrėžti keletą dalykų. Pirmasis yra etiketėse
stilius, mes turime dvi taisykles, pirmoji rodo, kad nuo
600 pikselių mūsų teksto fono spalva etiketėje
h1 Jis pasikeis į mėlyną, pažiūrėkime, kada pakeisime naršyklės dydį ir šis pakeitimas įsigalios:
Antroji taisyklė rodo, kad jei didžiausias plotis yra
400 pikselių teksto fono spalva pasikeis į raudoną, o tai reiškia trečią sąlygą, nes viskas, kas mažesnė nei 400 pikselių, bus raudona, o didesnė nei 600 - mėlyna, taigi nuo 401 iki 599 pikselių bus išlaikyta balta spalva pagal nutylėjimą, pažiūrėkime:
Galiausiai, jei žymiai sumažinsime naršyklės ekraną, įvesime raudonos fono spalvos taisyklę, pažiūrėkime, kaip ji atrodo:
Tada matome, kad mūsų naršyklės matmenų nustatymas yra labai paprasta užduotis
CSS3, tai yra labai naudinga, kai dirbame su reaguojančiu dizainu ir turime žinoti naudotojo naršyklės matmenis, kad galėtume pritaikyti stilius, dėl kurių mūsų svetainė atrodytų gerai bet kuriame įrenginyje ir esamą ekrano skiriamąją gebą.
