Kuidas kasutada vaatepordi metasilti HTML-i tundliku veebikujunduse jaoks?

Kuidas Kasutada Vaatepordi Metasilti Html I Tundliku Veebikujunduse Jaoks



Responsiivne veebidisain on veebisaitide kujundamise tehnika, mis muutub vastavalt erinevatele ekraanisuurustele ja seadmetele, et pakkuda kasutajatele sujuvat efekti. Arendaja saab oma veebisaidi tundlikuks muuta mitmel erineval viisil. Üks neist meetoditest on ' vaateava ” metasilt. Sellel sildil on atribuudid nagu ' laius ”, „ kõrgus ”, „ esialgne mõõtkava ” jne. Need atribuudid aitavad teatud viisil muuta veebidisaini tundlikuks.

See ajaveeb selgitab, kuidas kasutada HTML-is reageeriva veebikujunduse jaoks vaateava metasilti:

Mis on vaateakna metasilt?

' vaateava ” on kõige olulisem silt tundliku kujunduse loomiseks, kontrollides, kuidas sisu eri suurustes ekraanidel kuvatakse. See silt on paigutatud ' ” ja see sisaldab kahte atribuuti. Esimene neist on ' nimi ' atribuut, mis ütleb selle sildi eesmärgi ja teine ​​on ' sisu ', mis sisaldab andmeid, mis on seotud jaotises ' nimi ” atribuut.





Vaateava metasildi erinevad atribuudid

Vaateava metasildil on järgmised atribuudid, mida saab asetada väärtusena sisu ” atribuut:



atribuut 'laius'.

' laius ” atribuut määrab veebilehe nähtava ala sisu jaoks vertikaalselt. Selle metasilt näeb välja selline:



< meta nimi = 'vaateava' sisu = 'laius = seadme laius' >

atribuut 'kõrgus'.

' kõrgus ” atribuut määrab veebilehe vertikaalse pikkuse, et tagada vaateava kõrguse vastavus ekraani kõrgusele. Selle metasilt näeb välja selline:



< meta nimi = 'vaateava' sisu = 'kõrgus = 400' >

Atribuut 'Esialgne skaala'.

' Esialgne skaala ” atribuut tagab, et veebileht kuvatakse esmakordsel laadimisel sobival suumitasemel. Näiteks külastage allolevat koodi:

< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1,0' >

atribuut 'maksimaalne skaala'.

' maksimaalse ulatusega ” atribuut määrab veebilehe maksimaalse suumitaseme, et vältida paigutusprobleeme:



< meta nimi = 'vaateava' sisu = 'laius = seadme laius, maksimaalne skaala = 1,0' >

atribuut 'minimaalne skaala'.

' miinimumskaala ” kasutatakse selleks, et piirata kasutajal liigset väljasuumimist, määrates minimaalse väljasuumimise skaala:

< meta nimi = 'vaateava' sisu = 'laius = seadme laius, minimaalne skaala = 0,5' >

atribuut 'kasutaja skaleeritav'.

' kasutaja skaleeritav ' atribuut lubab või ei luba kasutajal veebilehe ekraani välja suumida või sisse suumida, määrates väärtuseks ' Ei ” või „ jah ”. Metabilt, mis võimaldab kasutajal sisse või välja suumida, on:

< meta nimi = 'vaateava' sisu = 'laius = seadme laius, kasutaja skaleeritav = jah' >

Kuidas kasutada vaatepordi metasilti HTML-i tundliku veebikujunduse jaoks?

Et paremini mõista vaateava metasildi kasutamist kohanduva veebikujunduse jaoks. Käime läbi näite:

Oletame, et sees

'silti on mitu'

' sildid ja pildid, mis sisestati veebilehele, kasutades ' ” silt:

< div >

< lk >

< b >Töötab Linuxhint, et vaateava metasilti paremini mõista, avage veebileht erinevatel ekraanidel suurus seadmed.< / b >

< / lk >

< img src = '../bg.jpg' kõike = 'häkker' laius = '460' kõrgus = '3. 4. 5' >

< lk stiilis = 'polster: 5px' >

< i >Liituge Linuxhinti meeskonnaga < / i >

Toetab Linuxhint, et vaateava metasilti paremini mõista, avage veebileht erinevatel ekraanidel suurus seadmed.Toidab Linuxhint, et vaateava metasilti paremini mõista, avage veebileht erinevatel ekraanidel suurus seadmed.Toidab Linuxhint, et vaateava metasilti paremini mõista, avage veebileht erinevatel ekraanidel suurus seadmed.Toidab Linuxhint, et vaateava metasilti paremini mõista, avage veebileht erinevatel ekraanidel suurus seadmeid.

< / lk >

< / div >

Pärast ülaltoodud koodilõigu koostamist näeb veebileht välja järgmine:

Väljund näitab, et sisu ei reageeri, kuna see ei kuvata väikestes seadmetes ideaalselt.

Nüüd, et muuta see tundlikuks, lisage ' vaateava ” metasilt:

< pea >

< meta nimi = 'vaateava' sisu = 'laius = seadme laius, esialgne skaala = 1,0' / >

< / pea >

Pärast koodi värskendamist näeb veebileht erinevatel ekraanisuurustel välja selline:

Lõplik väljund näitab, et veebileht reageerib nüüd pärast metasildi lisamist jaotisesse ' ” silti.

Järeldus

Vaateava metasilt võimaldab arendajal anda brauserile juhiseid, mis määravad, kuidas veebilehte eri ekraanisuurusega seadmetes kuvatakse. Metasilt paigutatakse elemendi ' ” märgend ja sisaldab atribuute, mis aitavad luua tundliku veebisaidi kujundust. See ajaveeb on näidanud, kuidas kasutada HTML-is reageeriva veebikujunduse jaoks vaateava metasilti.

muud

Kategooria

Lemmik Postitused

Kuidas installida Rust Ubuntule

Mis on JavaScriptis array.pop()?

Kuidas seadistada kohandatud Discord-video tausta

7 parandust Shockwave Flashile on Google Chrome'is kokku jooksnud

Kuidas installida Ansible Ubuntu 24.04

getch funktsioon C++-s

Miks ei saadeta Androidis tekstsõnumit?

Kuidas peatada sisu ületäitumine ja lubada CSS-i abil kerimine?

Kuidas lahendada JavaScripti/Node.js-i viga „nõue pole määratletud”.

Pandas Insert() veerg

Mida tähendab GitHubis hargnemine?

Kuidas kasutada Terraform AWS-i pakkujat?

Mis vahe on String.slice ja String.substring vahel?

Kuidas sünkroonida Androidi lõikelaud Windowsiga

Dockeri installimine Ubuntus

Kuidas parandada Pythoni SSL-sertifikaadi kinnitamise ebaõnnestumist

Mis vahe on toLocaleLowerCase ja toLowerCase vahel?

Millistel ESP32 tihvtidel on tõmbed

Tabeli paigaldamine

Kuidas kasutada Windowsi kleepuvaid märkmeid?