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

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

Kui soovite arendada veebisaite/veebirakendusi, on teie edu jaoks hädavajalik teada, kuidas luua tundlikke kujundusi.





Varem oli erinevate ekraanisuurustega hästi kohanenud veebisaitide loomine luksus, mida veebisaitide omanikud pidid arendajalt taotlema. Nutitelefonide ja tahvelarvutite kasutamise kasv on nüüd muutnud tundliku disaini tarkvaraarenduse maailmas vajalikuks.



Meediapäringute kasutamine on parim viis veendumaks, et teie veebisait/veebirakendus kuvatakse igas seadmes täpselt nii, nagu soovite.



Reageeriva disaini mõistmine

Lühidalt, tundlik disain käsitleb HTML/CSS -i kasutamist veebisaidi/veebirakenduse paigutuse loomiseks, mis kohandub erinevate ekraanisuurustega. HTML/CSS -is on veebisaidi kujundamisel reageerimisvõime saavutamiseks mitu võimalust:

  • Rem ja em ühikute kasutamine pikslite asemel (px)
  • Iga veebilehe vaateava/skaala seadistamine
  • Meediapäringute kasutamine

Mis on meediapäringud?

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



Loe lisaks: CSS3 oluliste omaduste petuleht

Meediumipäringud pakuvad raamistikku koodi ühekordseks loomiseks ja selle kasutamiseks kogu programmi jooksul mitu korda. See ei pruugi tunduda nii kasulik, kui arendate veebisaiti, millel on ainult kolm veebilehte, kuid kui töötate sadade erinevate veebilehtedega ettevõttes - see osutub tohutuks aja kokkuhoiuks.



Meediapäringute kasutamine

Meediapäringute kasutamisel peate arvestama mitme erineva asjaga: struktuur, paigutus, vahemik ja linkimine.

Meediapäringute struktuur

Näide meediapäringu struktuurist


@media only/not media-type and (expression){
/*CSS code*/
}

Meediumipäringu üldine struktuur hõlmab järgmist:



  • Märksõna @media
  • Mitte ainult märksõna
  • Meediumitüüp (see võib olla ekraan, print või kõne)
  • Märksõna ja
  • Unikaalne avaldis sulgudes
  • CSS -kood on suletud ja avatud lokkis.

Seotud: Dokumentide vormindamiseks printimiseks CSS -i kasutamine

Näide ainsa märksõnaga meediumipäringust


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Ülaltoodud näide rakendab CSS -stiili (täpsemalt sinist taustavärvi) ainult seadmete ekraanidele, mille laius on kuni 450 pikslit - seega põhimõtteliselt nutitelefonidele. Ainus märksõna saab asendada märksõnaga mitte ja CSS -i stiil ülaltoodud meediumipäringus kehtib ainult trükise ja kõne puhul.

Kuid vaikimisi kehtib üldine meediumipäringu deklaratsioon kõigile kolmele meediumitüübile, seega pole vaja meediatüüpi määrata, välja arvatud juhul, kui eesmärk on üks või mitu neist välja jätta.

Vaikemeedia päringu näide


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Meediapäringute paigutus

Meediumipäring on CSS -i atribuut; seetõttu saab seda kasutada ainult stiilikeeles. CSS -i oma koodi lisamiseks on kolm erinevat võimalust; ainult kaks neist meetoditest pakuvad praktilist võimalust meediumipäringute lisamiseks oma programmidesse - sisemine või väline CSS.

Sisemine meetod hõlmab märgendi lisamist HTML -faili märgendile ja meediumipäringu loomist märgendi parameetrite piires.

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

Meediapäringute valik

Ükskõik, kas meediumipäringuid kasutatakse sisemise või välise CSS -i kaudu, on stiilikeele üks oluline aspekt, mis võib negatiivselt mõjutada meediapäringu toimimist. CSS -il on paremusjärjestus. Kui kasutate CSS -i valijat või antud juhul meediumipäringut, siis iga uus meediumipäring, mis lisatakse CSS -faili, alistab (või eelistab) eelmist.

Meie ülaltoodud vaikemeedia päringukood on suunatud nutitelefonidele (laiusega 450 pikslit ja alla selle), nii et kui soovite tahvelarvutitele määrata erineva tausta, võite arvata, et saate lihtsalt lisada järgmise koodi oma olemasolevale CSS-failile.

Tahvelarvuti päringu näide


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

Ainus probleem on see, et eelisjärjekorra tõttu oleks tahvelarvutitel taustavärv punane ja nutitelefonidel nüüd ka punane taustavärv, sest 450 pikslit ja alla selle on alla 800 piksli.

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

Siiski on parem viis nutitelefonide ja tahvelarvutite jaoks eraldi stiili saavutamiseks, ilma et peaksite muretsema eelisjärjekorra pärast. See on meediumipäringute funktsioon, mida nimetatakse vahemiku spetsifikatsiooniks, kus arendaja saab luua maksimaalse ja minimaalse laiusega (vahemik) meediumipäringu.

Tahvelarvuti päring vahemikuga


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

Ülaltoodud näite puhul muutub meediumipäringute paigutamine stiililehele ebaoluliseks, kuna tahvelarvutite ja nutitelefonide disain on suunatud kahele eraldi laiusekogule.

Kui te ei soovi meediumipäringuid oma CSS -koodi manustada, saate kasutada alternatiivset meetodit. See meetod hõlmab meediumipäringute kasutamist HTML -faili märgendis, nii et nutitelefonide, tahvelarvutite ja arvutite stiilieelistusi sisaldava massiivse stiililehe asemel saate kasutada kolme eraldi CSS -faili ja luua märgendis oma meediumipäringud.

Märgend on HTML -element, mida kasutatakse CSS -i stiili importimiseks väliselt stiililehelt. Sellel sildil on meediaomadus, mis toimib samamoodi nagu meediumipäring CSS -is.




href='tablet.css'>


Ülaltoodud kood tuleks paigutada teie HTML -faili märgendisse. Nüüd peate looma kolm eraldi CSS -faili failinimedega main.css, tablet.css ja smartphone.css - seejärel looge iga seadme jaoks konkreetne kujundus.

Põhifaili stiil kehtib kõikidele ekraanidele, mille laius on suurem kui 800 pikslit, tahvelarvuti failis olev stiil kehtib kõikidele ekraanidele, mille laius on vahemikus 450–801 pikslit, ja nutitelefoni failis olev stiil kehtib kõikidele allpool olevatele ekraanidele. 451 pikslit.

kuidas määrata gifid Windows 10 taustapildiks

Nüüd on teil tööriistad tundlike kujunduste loomiseks

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

Pildikrediit: negatiivne ruum/ Pexels

Jaga Jaga Piiksuma E -post Kuidas CSS -is taustapilti määrata?

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

Loe edasi Seotud teemad
  • Programmeerimine
  • Veebiarendus
  • Veebidisain
  • CSS
Autori kohta Kadeisha Kean(Avaldatud 21 artiklit)

Kadeisha Kean on täispinu tarkvaraarendaja ja tehniline/tehnoloogiline kirjutaja. Tal on selge võime lihtsustada mõnda kõige keerukamat tehnoloogilist kontseptsiooni; materjali tootmine, millest igale tehnoloogia algajale on lihtne aru saada. Ta on kirglik kirjutamise, huvitava tarkvara arendamise ja maailmas reisimise vastu (dokumentaalfilmide kaudu).

Veel Kadeisha Keanilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin