Kaip naudoti peržiūros srities metažymą reaguojančiam žiniatinklio dizainui HTML?

Kaip Naudoti Perziuros Srities Metazyma Reaguojanciam Ziniatinklio Dizainui Html



Interaktyvus žiniatinklio dizainas yra svetainių kūrimo technika, kuri keičiasi atsižvelgiant į skirtingus ekrano dydžius ir įrenginius, kad vartotojams būtų užtikrintas vientisas efektas. Yra įvairių metodų, kuriais kūrėjas gali padaryti savo svetainę reaguojančią. Vienas iš šių būdų yra „ peržiūros sritis “ metažyma. Ši žyma turi tokius atributus kaip ' plotis “, „ aukščio “, „ pradinio masto “ ir tt Šie atributai tam tikrais būdais padeda padaryti interneto dizainą jautrų.

Šiame tinklaraštyje bus paaiškinta, kaip naudoti peržiūros srities metažymą interaktyviam žiniatinklio dizainui HTML:

Kas yra peržiūros srities metažyma?

„ peržiūros sritis “ yra svarbiausia žyma kuriant interaktyvų dizainą kontroliuojant, kaip turinys bus rodomas skirtingų dydžių ekranuose. Ši žyma dedama viduje “ skyrių ir jame yra du atributai. Pirmasis yra „ vardas “ atributas, nurodantis šios žymos paskirtį, o antrasis – „ turinys “, kuriame saugomi duomenys, susiję su verte, pateikta „ vardas “ atributas.





Įvairūs peržiūros srities metažymos atributai

Peržiūros srities metažyma turi šiuos atributus, kurie gali būti pateikti kaip „ turinys “ atributas:



atributas „plotis“.

„ plotis “ atributas nurodo vertikaliai matomą tinklalapio sritį. Jo metažyma atrodo taip:



< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis' >

atributas 'aukštis'.

„ aukščio ” atributas nustato vertikalų tinklalapio ilgį, kad būtų užtikrinta, jog peržiūros srities aukštis atitiktų ekrano aukštį. Jo metažyma atrodo taip:



< meta vardas = 'žiūros sritis' turinys = 'aukštis = 400' >

„Pradinio masto“ atributas

„ Pradinis mastelis ” atributas užtikrina, kad tinklalapis pirmą kartą įkeliant būtų rodomas atitinkamu mastelio lygiu. Pavyzdžiui, apsilankykite toliau pateiktu kodu:

< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1,0' >

„maksimalaus masto“ atributas

„ maksimalaus masto ” atributas nurodo maksimalų tinklalapio mastelio keitimo lygį, kad būtų išvengta išdėstymo problemų:



< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, didžiausia skalė = 1,0' >

„minimalaus masto“ atributas

„ minimalaus masto “ naudojamas siekiant apriboti vartotoją nuo per didelio mastelio nutolinimo, nurodant mažiausią mastelio mastelio lygį:

< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, minimalus skalė = 0,5' >

„vartotojo keičiamo dydžio“ atributas

„ vartotojas keičiasi ' atributas leidžia arba neleidžia vartotojui sumažinti arba padidinti tinklalapio ekraną nustatant reikšmę ' Nr “ arba „ taip “. Metažyma, leidžianti vartotojui priartinti arba nutolinti, yra:

< meta vardas = 'žiūros sritis' turinys = 'width=device-width, user-scalable=yes' >

Kaip naudoti peržiūros srities metažymą reaguojančiam žiniatinklio dizainui HTML?

Norėdami geriau suprasti peržiūros srities metažymos naudojimą interaktyviam žiniatinklio dizainui. Panagrinėkime pavyzdį:

Tarkime, viduje

'žyma yra keletas'

“ žymas ir vaizdus, ​​įterptus į tinklalapį naudojant „ “ žyma:

< div >

< p >

< b >Parengta Linuxhint, kad geriau suprastumėte peržiūros srities metažymą, atidarykite tinklalapį kitame ekrane dydis prietaisai.< / b >

< / p >

< img src = '../bg.jpg' viskas = 'Hakeris' plotis = '460' aukščio = '3. 4. 5' >

< p stilius = 'padding: 5px' >

< i >Prisijunkite prie „Linuxhint“ komandos < / i >

Naudojama Linuxhint, kad geriau suprastumėte peržiūros srities metažymą, atidarykite tinklalapį kitame ekrane dydis Įrenginiams.Parengta Linuxhint, kad geriau suprastumėte peržiūros srities metažymą, atidarykite tinklalapį kitame ekrane dydis Įrenginiams.Parengta Linuxhint, kad geriau suprastumėte peržiūros srities metažymą, atidarykite tinklalapį kitame ekrane dydis Įrenginiams.Parengta Linuxhint, kad geriau suprastumėte peržiūros srities metažymą, atidarykite tinklalapį kitame ekrane dydis prietaisai.

< / p >

< / div >

Sudarius aukščiau pateiktą kodo fragmentą, tinklalapis atrodo taip:

Išvestis rodo, kad turinys nereaguoja, nes mažuose įrenginiuose jis nerodomas tobulai.

Dabar, kad jis būtų jautrus, pridėkite „ peržiūros sritis “ metažyma:

< galva >

< meta vardas = 'žiūros sritis' turinys = 'plotis = įrenginio plotis, pradinė skalė = 1,0' / >

< / galva >

Atnaujinus kodą, skirtingų dydžių ekranuose tinklalapis atrodo taip:

Galutinė išvestis rodo, kad tinklalapis dabar reaguoja po metažymos pridėjimo „ “ žymą.

Išvada

Peržiūros srities metažyma leidžia kūrėjui pateikti naršyklei instrukcijų rinkinį, kuris nustato, kaip tinklalapis bus rodomas skirtingo dydžio ekrano įrenginiuose. Metažyma dedama viduje “ žymą ir yra atributų, padedančių sukurti interaktyvų svetainių dizainą. Šiame tinklaraštyje parodyta, kaip naudoti peržiūros srities metažymą interaktyviam žiniatinklio dizainui HTML.

Kita

Kategorija

Populiarios Temos

Ar ECS yra tas pats, kas Docker?

„Git“ diegimo procesas „Ubuntu“.

Kaip naudoti „Windows“ užduočių rodinį

Kaip pasirinkti atsitiktines eilutes iš matricos MATLAB?

Paleiskite sistemos failų tikrinimo priemonę „Windows 10“ 21H2 versijoje!!!

Kaip pasigaminti DaBaby Arms mikstūrą „Roblox Wacky Wizards“.

Kaip nustatyti profilio reklamjuostę Discord Nitro

Kaip sukonfigūruoti automatinius saugos naujinimus „Debian 11“.

Kaip prijungti Node.js programą

Kaip rasti dykumos piramidę „Minecraft“.

Kaip pridėti ir naudoti lipdukus „Discord“.

Kaip pridėti dvigubą kraštą skirtingomis spalvomis?

Kaip paleisti „JavaScript“ scenarijų pasibaigus CSS animacijai

Kaip siųsti ir sugauti SIGTERM „Bash“ ir „Python“.

Kaip sukurti ir naudoti simbolines nuorodas „Linux Mint 21“.

Discord Bot kūrimas: kaip pradėti paprastais veiksmais

30 C++ vektorių pavyzdžių

Kaip tiksliai atlikti tinklo greičio testą naudojant „Android“.

Kaip susieti katalogą „Linux“.

Kaip naudoti kintamąjį įprastoje „JavaScript“ išraiškoje