Kuidas kasutada HTML-i ja CSS-is meediumipäringuid tundlike veebisaitide loomiseks

Kui soovite arendada veebisaite / veebirakendusi, on teie edu jaoks ülitähtis teadmine, kuidas reageerivaid kujundusi luua.

Varem oli erinevate ekraanisuurustega hästi kohanevate veebisaitide loomine luksus, mida veebisaitide omanikud pidid arendajalt nõudma. Nutitelefonide ja tahvelarvutite kasutamise tõus on nüüd tarkvaraarenduse maailmas muutnud reageeriva disaini hädavajalikuks.

Meediumipäringute kasutamine on parim viis tagada, et teie veebisait / veebirakendus ilmuks igas seadmes täpselt nii, nagu soovite.

Reageeriva disaini mõistmine

Lühidalt öeldes käsitleb tundlik disain HTML / CSS-i kasutamist veebisaidi / veebirakenduse paigutuse loomiseks, mis kohandub erinevate ekraanisuurustega. HTML / CSS-is on veebisaidi kujundamisel reageerimisvõime saavutamiseks mõned erinevad viisid:

• Rem- ja em-üksuste kasutamine pikslite asemel (px)
• Iga veebilehe vaateava / skaala määramine
• Meediumipäringute kasutamine

Meediumipäring on CSS-i funktsioon, mis ilmus CSS3 versioonis. Selle uue funktsiooni kasutuselevõtuga saavad CSS-i kasutajad võimaluse kohandada veebilehe kuvamist seadme / ekraani kõrguse, laiuse ja orientatsiooni (horisontaal- või portreerežiim) põhjal.

Loe rohkem: Essential CSS3 Properties petta leht

Meediumipäringud pakuvad raamistiku koodi loomiseks üks kord ja kogu programmi jooksul mitu korda kasutamiseks. See ei pruugi tunduda nii kasulik, kui arendate veebisaiti, kus on ainult kolm veebilehte, kuid kui töötate ettevõttes, kus on sadu erinevaid veebilehti - see osutub tohutuks ajaks säästja.

Meediumipäringute kasutamisel peate arvestama mitmete erinevate asjadega: struktuur, paigutus, vahemik ja linkimine.

ainult @media / mitte meediumitüüp ja (avaldis) {
/ * CSS-kood * /
}

Meediumipäringu üldine struktuur sisaldab järgmist:

• Märksõna @media
• Mitte / ainus märksõna
• Meediumitüüp (mis võib olla kas ekraan, print või kõne)
• Märksõna „ja”
• Sulgudesse suletud unikaalne avaldis
• CSS-kood, mis on suletud paari avatud ja suletud lokkis traksid.

Seotud: CSS-i kasutamine dokumentide printimiseks vormindamiseks

Ainult @media ekraan ja (maksimaalne laius: 450 pikslit) {
keha {
taustavärv: sinine;
}
}

Eespool toodud näide rakendab CSS-i stiili (täpsemalt sinist taustavärvi) ainult seadme ekraanidele, mille laius on 450 pikslit ja vähem - seega põhimõtteliselt nutitelefonid. „Ainsa” märksõna saab asendada märksõnaga „mitte” ja siis kehtib ülaltoodud meediumipäringus CSS-i stiil ainult printimise ja kõne puhul.

Vaikimisi kehtib üldine meediumipäringu deklaratsioon kõigi kolme meediumitüübi kohta, seega pole meediumitüüpi vaja määratleda, välja arvatud juhul, kui eesmärk on üks või mitu neist välistada.

/ * nutitelefonide disain * /
@media (max-laius: 450px) {
keha {
taustavärv: sinine;
}
}

Meediumipäring on CSS-i atribuut; seetõttu saab seda kasutada ainult stiilikeeles. CSS-i kaasamiseks oma koodi on kolm erinevat viisi; vaid kaks neist meetoditest pakuvad praktilist viisi meediaküsimuste lisamiseks oma programmidesse - sisemine või väline CSS.

Sisemine meetod hõlmab

Väline meetod hõlmab meediumipäringu loomist välises CSS-failis ja selle linkimist HTML-failiga silt.

Sõltumata sellest, kas meediumipäringuid kasutatakse sisemise või välise CSS-i kaudu, on stiilikeelel üks oluline aspekt, mis võib negatiivselt mõjutada meediumipäringu toimimist. CSS-is on ülimuslikkuse reegel. Kasutades a CSS-i valijavõi antud juhul meediumipäring, iga uus CSS-faili lisatud meediumipäring alistab (või on ülimuslik) varasema päringu.

Vaikimisi meediumipäringu kood, mis meil on eespool, on suunatud nutitelefonidele (laius 450px ja alla), nii et kui soovite määrata a erineva taustaga tahvelarvutid, võite arvata, et võite oma olemasolevale CSS-failile lihtsalt lisada järgmise koodi.

/ * tahvelarvutite disain * /
@media (max-laius: 800px) {
keha {
taustavärv: punane;
}
}

Ainus probleem on see, et paremusjärjestuse tõttu oleks tahvelarvutitel punane taustavärv ja nutitelefonidel oleks ka punane taustavärv, kuna 450 pikslit ja alla selle on alla 800 pikslit.

Üks viis selle väikese probleemi lahendamiseks oleks lisada tahvelarvutite meediumipäring enne nutitelefonide päringuid; viimane tühistaks esimese ja teil oleks nüüd sinise taustavärviga nutitelefonid ja punase taustavärviga tahvelarvutid.

Siiski on parem viis nutitelefonide ja tahvelarvutite jaoks eraldi stiilide loomiseks, muretsemata paremusjärjestuse pärast. See on meediumipäringute funktsioon, mida nimetatakse vahemikuspetsifikatsiooniks, kus arendaja saab luua meediumipäringu maksimaalse ja minimaalse laiusega (vahemik).

/ * tahvelarvutite disain * /
@media (max-width: 800px) ja (min-width: 451) {
keha {
taustavärv: punane;
}
}

Ülaltoodud näite kohaselt muutub meediumipäringute paigutamine stiililehel ebaoluliseks, kuna tahvelarvutite ja nutitelefonide disain on suunatud kahele eraldi laiuskogule.

Kui te ei soovi meediumipäringuid oma CSS-koodi kinnistada, saate kasutada mõnda muud meetodit. See meetod hõlmab meediumipäringute kasutamist rakenduses HTML-faili silt, seega selle asemel, et teil oleks üks massiivne stiilitabel, mis sisaldab stiili eelistusi nutitelefonid, tahvelarvutid ja arvutid - saate kasutada kolme eraldi CSS-faili ja luua oma meediumipäringud silt.

The silt on HTML-element, mida kasutatakse CSS-i stiili importimiseks väliselt stiililehelt. Sellel sildil on meediaomadus, mis töötab samamoodi nagu CSS-is meediumipäring.

 peamine stiilileht 

 tahvelarvuti stiilitabel 
href = "tablet.css">
 nutitelefoni stiilitabel 

Ülaltoodud kood tuleks paigutada

HTML-faili silt. Nüüd on vaja vaid luua kolm eraldi CSS-faili failinimedega main.css, tablet.css ja smartphone.css - seejärel luua konkreetne kujundus, mida soovite igale seadmele.

Põhifaili stiil rakendub kõigile ekraanidele, mille laius on suurem kui 800 pikslit, rakendub tahvelarvutifailis olev stiil kõikidele ekraanidele, mille laius on 450–801 pikslit, ja nutitelefonifaili stiil rakendub kõigile allpool olevatele ekraanidele 451 pikslit.

Kui jõudsite selle artikli lõppu, siis sai teada, mis on tundlik disain ja miks see kasulik on. Nüüd saate tuvastada ja kasutada meediumipäringuid CSS-i ja HTML-failides. Lisaks tutvustati teile CSS-i tähtsuse järjekorda ja nägite, kuidas see võib mõjutada teie meediumipäringute toimimist.

Pildikrediit: negatiivne ruum /Pexels

Kuidas CSS-is taustapilti seada

CSS on võimas tööriist veebilehtede kujundamiseks. Taustpildi õppimise õppimine õpetab teile palju CSS-i põhitõdesid.

Loe edasi

Autori kohta