Kaip parašyti CSS medijos užklausą?

Žinokite minimalaus ir didžiausio pločio medijos užklausų sintaksę

Responsive web dizainas yra tinklalapių kūrimo būdas, kai tie puslapiai gali dinamiškai keisti savo išdėstymą ir išvaizdą pagal lankytojo ekrano dydį . Dideli ekranai gauna išdėstymą, pritaikytą tiems didesniems ekranams, o mažesni įrenginiai, pvz., mobilieji telefonai, gauna tą pačią svetainę, suformatuotą tokiu būdu, kuris tinka tam mažesniam ekranui. Šis metodas suteikia geresnę vartotojo patirtį visiems vartotojams ir netgi gali padėti pagerinti paieškos sistemos reitingą . CSS medijos užklausos yra svarbi interaktyvaus interneto dizaino dalis.

Medijos užklausos yra tarsi maži sąlyginiai teiginiai jūsų svetainės CSS faile, leidžiantys nustatyti tam tikras CSS taisykles, kurios įsigalios tik įvykdžius tam tikrą sąlygą, pvz., kai ekrano dydis viršija arba mažesnis už tam tikras ribas.

Medijos užklausos dabar yra standartinės, tačiau labai senos Internet Explorer versijos jų nepalaiko.

Medijos užklausos veikia

Pradėkite nuo geros struktūrosHTML dokumentasbe jokių vizualinių stilių.

CSS faile nustatykite puslapio stilių ir nustatykite pagrindinę svetainės išvaizdą. Jei norite, kad puslapio šrifto dydis būtų 16 pikselių, parašykite tai CSS :

|_+_|

Pridedama daugiau medijos užklausų

Be to, galite pridėti daugiau medijos užklausų kiekvienam didesniam dydžiui, įterpdami jas į savo stilių lapą taip:

|_+_|

Pirmosios medijos užklausos pradeda veikti 1000 pikselių pločio, pakeičiant šrifto dydį iki 20 pikselių. Tada, kai naršyklė buvo didesnė nei 1400 pikselių, šrifto dydis vėl pasikeis į 24 pikselius. Pridėkite tiek medijos užklausų, kiek reikia jūsų konkrečiai svetainei.

Minimalus plotis ir maksimalus plotis

Paprastai yra du būdai, kaip rašyti medijos užklausas – naudojant min pločio arba su maksimalus plotis . Iki šiol matėme minimalų plotį. Šis metodas suaktyvina medijos užklausas, kai naršyklė pasiekia bent tą minimalų plotį. Taigi užklausa, kuri naudoja minimalus plotis: 1000 piks taikoma, kai naršyklė yra bent 1000 pikselių pločio. Šis medijos užklausos stilius naudojamas, kai kuriate svetainę pirmiausia mobiliuoju būdu.

Jei naudojate maksimalus plotis , jis veikia priešingai. Medijos užklausa „maksimalus plotis: 1000 pikselių“ taikoma, kai naršyklė nukrenta žemiau šio dydžio.