Sinapsas tiek min-pločio, tiek maksimalaus pločio žiniasklaidos užklausoms
Atsakomasis web dizainas yra būdas kurti tinklalapius, kuriuose šie puslapiai gali dinamiškai keisti savo maketą ir išvaizdą pagal lankytojo ekrano dydį . Didesni ekranai gali gauti maketą, tinkantį tiems didesniams ekranams, o mažesni įrenginiai, pvz., Mobilieji telefonai, gali gauti tą pačią svetainę, kurios formatas yra tinkamas tame mažesnio ekrano. Šis metodas suteikia geresnę naudotojų patirtį visiems vartotojams ir netgi gali padėti pagerinti paieškos sistemų reitingus . Svarbi jautri interneto dizaino dalis yra "CSS Media Queries".
Žiniasklaidos užklausos yra panašios į nedidelius sąlyginius teiginius jūsų svetainės CSS failo viduje, todėl galite nustatyti tam tikras CSS taisykles, kurios turės įtakos tik įvykdžius tam tikrą sąlygą, pavyzdžiui, kai ekrano dydis yra didesnis arba mažesnis už tam tikras ribas.
"Media Queries in Action"
Taigi, kaip jūs naudojate žiniasklaidos užklausas svetainėje? Čia yra labai paprastas pavyzdys:
- Jūs turėtumėte pradėti gerai struktūrizuotą HTML dokumentą be jokių vaizdinių stilių (tai yra koks yra CSS)
- Savo CSS faile pradėsite, kaip paprastai, sukūrę puslapį ir nustatydami bazinę liniją, kaip atrodys svetainė. Pasakykite, kad norite, kad puslapio šrifto dydis būtų 16 pikselių, galite parašyti šį CSS: body {font-size: 16px; }
- Dabar galite padidinti šrifto dydį didesniems ekranams, turintiems pakankamai nekilnojamojo turto. Štai kur prasideda "Media Queries". Jūs pradėtumėte tokią "Media Query": "@media" ekranas ir (min-width: 1000px) {}
- Tai yra žiniasklaidos užklausos sintaksė. Jis prasideda nuo "@media", kad pats nustatytų "Media Query". Kitas jūs nustatote "medijos tipą", kuris šiuo atveju yra "ekranas". Tai taikoma stalinio kompiuterio ekranams, planšetiniams kompiuteriams, telefonams ir tt Galiausiai baigiate "Media Query" su "media funkcija". Mūsų aukščiau pateiktame pavyzdyje tai yra "vidurio plotis: 1000 pikselių". Tai reiškia, kad "Media Query" bus rodomas ekranuose, kurių plotis yra ne mažesnis kaip 1000 pikselių.
- Po šių "Media Query" elementų pridedate atidarymo ir uždarymo garbanojimo grandinę, panašią į tai, ką jūs atliktumėte bet kokioje įprastoje CSS taisyklėje.
- Paskutinis Žiniasklaidos užklausos žingsnis yra pridėti CSS taisykles, kurias norite taikyti, kai bus įvykdyta ši sąlyga. Jūs pridedate šiuos CSS taisykles tarp garbanotų liemenių, sudarančių Žiniasklaidos užklausą, tokį kaip: @media ekranas ir (min-width: 1000px) {body {font-size: 20px; }
- Kai įvykdomos Media Query sąlygos (naršyklės langas yra mažiausiai 1000 pikselių pločio), šis CSS stilius įsigalios, pakeisdamas mūsų svetainės šrifto dydį iš 16 pikselių, kuriuos iš pradžių nustatėme, iki mūsų naujos 20 pikselių vertės.
Pridedant daugiau stilių
Pagal šią "Media Query" galite įdėti tiek CSS taisykles, kiek reikia, norėdami koreguoti svetainės išvaizdą. Pavyzdžiui, jei norėtumėte ne tik padidinti šrifto dydį iki 20 pikselių, bet ir pakeisti visų juodųjų dalių spalvą (# 000000), galite pridėti šį:
@media ekranas ir (min-width: 1000px) {body {font-size: 20px; } p (spalva: # 000000; }}Daugiau žiniasklaidos užklausų pridėjimas
Be to, galite pridėti daugiau žiniasklaidos užklausų kiekvienam didesniam dydžiui, pridedant juos į savo stilių lentelę, tokiu būdu:
@media ekranas ir (min-width: 1000px) {body {font-size: 20px; } p (spalva: # 000000; {} @media ekranas ir (min-width: 1400px) {body {font-size: 24px; }}Pirmasis "Media Queries" užfiksuotų 1000 pikselių pločio, pakeitus šrifto dydį iki 20 pikselių. Tada, kai naršyklė buvo virš 1400 pikselių, šrifto dydis vėl pasikeis į 24 pikselius. Galite pridėti tiek daug žiniasklaidos užklausų, kiek reikia jūsų konkrečiai svetainei.
Minimalus plotis ir maksimalus plotis
Dažniausiai yra du būdai parašyti žiniasklaidos užklausas - naudojant "min-width" arba "max-width". Iki šiol mes matėme "min-width" veikimą. Dėl to žiniasklaidos užklausos įsigalioja, kai naršyklė pasiekia bent tokį minimalų plotį. Taigi užklausa, kuri naudoja "min-width: 1000px", bus taikoma tada, kai naršyklė yra mažiausiai 1000 pikselių pločio. Šis "Media Query" stilius naudojamas kuriant svetainę "pirmą kartą mobiliuoju" būdu.
Jei naudojate "max-width", tai veikia priešingai. "Max-width: 1000px" žiniasklaidos užklausa turėtų būti taikoma, kai naršyklė nukrito žemiau šio dydžio.
Dėl senesnių naršyklių
Vienas iš uždavinių, susijusių su "Media Queries", - jų trūksta senesnių versijų "Internet Explorer" palaikymo. Laimei, yra daugybė populiarių , galinčių patobulinti žiniasklaidos užklausų palaikymą tomis senesnėmis naršyklėmis, leidžiančioms juos naudoti šiose svetainėse, tuo pačiu užtikrinant, kad šios svetainės rodymas nesibaigtų senesnėje naršyklės programinėje įrangoje.
Redagavo Jeremy Girard 17.24.17