Kaip naudoti medijos užklausas HTML ir CSS kuriant reaguojančias svetaines

Jei norite kurti internetines svetaines / žiniatinklio programas, jūsų sėkmei būtina žinoti, kaip kurti reaguojančius dizainus.

Anksčiau svetainių, puikiai pritaikytų skirtingiems ekranų dydžiams, kūrimas buvo prabanga, kurios svetainių savininkai turėjo prašyti kūrėjo. Tačiau dėl išmaniųjų telefonų ir planšetinių kompiuterių naudojimo tendencijų reaguojantis dizainas tapo būtinas programinės įrangos kūrimo pasaulyje.

Medijos užklausų naudojimas yra geriausias būdas užtikrinti, kad jūsų svetainė / žiniatinklio programa kiekviename įrenginyje būtų rodoma tiksliai taip, kaip norite.

Reaguojančio dizaino supratimas

Trumpai tariant, interaktyvus dizainas susijęs su HTML / CSS naudojimu kuriant svetainės / žiniatinklio programos išdėstymą, kuris prisitaiko prie įvairių dydžių ekrano. HTML / CSS yra keli skirtingi būdai, kaip pasiekti reakciją kuriant svetainę:

• Rem ir em vienetų naudojimas vietoj pikselių (px)
• Kiekvieno tinklalapio peržiūros srities / mastelio nustatymas
• Naudojant žiniasklaidos užklausas

Medijos užklausa yra CSS funkcija, kuri buvo išleista CSS3 versijoje. Pristatę šią naują funkciją, CSS vartotojai įgyja galimybę koreguoti tinklalapio rodymą pagal įrenginio / ekrano aukštį, plotį ir orientaciją (gulsčio ar portreto režimu).

Skaityti daugiau: „Essential CSS3 Properties“ apgaulės lapas

Medijos užklausos suteikia pagrindą, kaip vieną kartą sukurti kodą ir kelis kartus jį naudoti visoje programoje. Tai gali pasirodyti ne taip naudinga, jei kuriate svetainę, kurioje yra tik trys tinklalapiai, bet jei taip dirbate įmonėje, kurioje yra šimtai skirtingų tinklalapių - tai bus didžiulis laikas taupyklė.

Yra keli skirtingi dalykai, į kuriuos turite atsižvelgti naudodami medijos užklausas: struktūra, paskirties vieta, diapazonas ir susiejimas.

Tik @media / ne medijos tipas ir (išraiška) {
/ * CSS kodas * /
}

Bendroji medijos užklausos struktūra apima:

• @Media raktinis žodis
• Ne / vienintelis raktinis žodis
• Medijos tipas (kuris gali būti ekranas, spausdinimas arba kalba)
• Raktinis žodis „ir“
• Skliausteliuose uždaryta unikali išraiška
• CSS kodas, uždarytas poroje atvirų ir uždarų garbanotų petnešų.

Susijęs: CSS naudojimas dokumentams formatuoti spausdinant

Tik „@media“ ekranas ir (maks. plotis: 450 taškų) {
kūnas{
fono spalva: mėlyna;
}
}

Ankstesniame pavyzdyje CSS stilius (ypač mėlynos spalvos spalva) taikomas tik įrenginių ekranams, kurių plotis yra 450 pikselių ir mažesnis, taigi iš esmės išmaniesiems telefonams. Raktinį žodį „vienintelis“ galima pakeisti raktiniu žodžiu „ne“, tada CSS stilius aukščiau pateiktoje medijos užklausoje bus taikomas tik spausdinimui ir kalbai.

Tačiau pagal numatytuosius nustatymus bendra medijos užklausos deklaracija taikoma visiems trims laikmenų tipams, todėl nereikia nurodyti medijos tipo, nebent siekiama išskirti vieną ar daugiau jų.

/ * dizainas išmaniesiems telefonams * /
@media (maks. plotis: 450 taškų)
kūnas{
fono spalva: mėlyna;
}
}

Medijos užklausa yra CSS ypatybė; todėl jį galima naudoti tik stiliaus kalba. Yra trys skirtingi būdai įtraukti CSS į savo kodą; tačiau tik du iš šių metodų suteikia praktinį būdą įtraukti medijos užklausas į savo programas - vidinę ar išorinę CSS.

Vidinis metodas apima pridėjimą

Išorinis metodas apima medijos užklausos sukūrimą išoriniame CSS faile ir susiejimą su HTML failu per žyma.

Nesvarbu, ar medijos užklausos naudojamos per vidinę, ar išorinę CSS, yra vienas pagrindinių stiliaus kalbos aspektų, kuris gali neigiamai paveikti medijos užklausos veikimą. CSS turi pirmenybės tvarką. Naudojant a CSS parinkiklis, arba šiuo atveju medijos užklausa, kiekviena nauja medijos užklausa, įtraukta į CSS failą, pakeičia (arba turi viršenybę) prieš tai buvusią.

Numatytasis medijos užklausos kodas, kurį mes turime aukščiau, yra skirtas išmaniesiems telefonams (450 taškų pločio ir mažesniems), taigi, jei norite nustatyti a skirtingas planšetinių kompiuterių fonas, kurį galite pagalvoti, kad galite paprasčiausiai pridėti šį kodą prie savo esamo CSS failo.

/ * planšetinių kompiuterių dizainas * /
@media (maks. plotis: 800 taškų) {
kūnas{
fono spalva: raudona;
}
}

Vienintelė problema yra ta, kad dėl pirmenybės planšetiniai kompiuteriai turėtų raudoną fono spalvą, o išmanieji telefonai - taip pat raudoną fono spalvą, nes 450 pikselių ir mažiau nesiekia 800 pikselių.

Vienas iš būdų išspręsti šią mažą problemą būtų pridėti planšetinių kompiuterių užklausą žiniasklaidai prieš tas, kurios skirtos išmaniesiems telefonams; pastarasis pakeistų pirmąjį, o dabar turėtumėte išmaniuosius telefonus su mėlyna fono spalva ir planšetinius kompiuterius su raudona fono spalva.

Tačiau yra geresnis būdas pasiekti atskirą išmaniųjų telefonų ir planšetinių kompiuterių stilių, nesijaudinant dėl ​​pirmenybės tvarkos. Tai yra daugialypės terpės užklausų, vadinamų diapazono specifikacija, ypatybė, kai kūrėjas gali sukurti medijos užklausą su didžiausiu ir mažiausiu plotu (diapazonu).

/ * planšetinių kompiuterių dizainas * /
@media (maks. plotis: 800 taškų) ir (min. plotis: 451) {
kūnas{
fono spalva: raudona;
}
}

Pateikiant aukščiau pateiktą pavyzdį, medijos užklausų pateikimas stiliaus lape tampa nebesvarbus, nes planšetinių kompiuterių ir išmaniųjų telefonų dizainas skirtas dviem atskiroms pločio kolekcijoms.

Jei nenorite įterpti medijos užklausų į savo CSS kodą, galite naudoti alternatyvų metodą. Šis metodas apima medijos užklausų naudojimą HTML failo žymą, todėl užuot turėję vieną masyvų stiliaus lapą, kuriame yra stiliaus nuostatos išmanieji telefonai, planšetiniai kompiuteriai ir kompiuteriai - galite naudoti tris atskirus CSS failus ir sukurti savo medijos užklausas žyma.

žyma yra HTML elementas, naudojamas importuoti CSS stilių iš išorinio stiliaus lapo. Ši žyma turi medijos ypatybę, kuri veikia taip pat, kaip medijos užklausa būtų CSS.

 pagrindinis stiliaus lapas 

 planšetinio kompiuterio stiliaus lapas 
href = "tablet.css">
 išmaniojo telefono stiliaus lapas 

Aukščiau pateiktas kodas turėtų būti dedamas į

HTML failo žymą. Dabar jums tereikia sukurti tris atskirus CSS failus su failų pavadinimais main.css, tablet.css ir smartphone.css - tada sukurti konkretų dizainą, kurio norėtumėte kiekvienam įrenginiui.

Stilius pagrindiniame faile bus taikomas visiems ekranams, kurių plotis didesnis nei 800 taškų, planšetiniame faile esantis stilius visuose ekranuose, kurių plotis yra nuo 450 iki 801 taškų, o išmaniojo telefono failo stilius bus taikomas visiems žemiau esantiems ekranams 451 piks.

Jei patekote į šio straipsnio pabaigą, galėjote sužinoti, kas yra interaktyvus dizainas ir kodėl jis yra naudingas. Dabar galite nustatyti ir naudoti medijos užklausas CSS ir HTML failuose. Be to, jūs buvote supažindintas su prioritetu CSS ir pamatėte, kaip tai gali paveikti jūsų medijos užklausų veikimą.

Vaizdo kreditas: neigiama erdvė /Pekseliai

Kaip nustatyti fono paveikslėlį CSS

CSS yra galingas tinklalapių stiliaus įrankis. Išmokę įdėti fono paveikslėlį, išmokote daug CSS pagrindų.

Skaitykite toliau

Apie autorių