Tento blog vysvetlí, ako používať metaznačku viewport pre responzívny webový dizajn v HTML:
Čo je to metaznačka Viewport?
' výrez “ je najdôležitejšia značka na vytvorenie responzívneho dizajnu ovládaním spôsobu zobrazovania obsahu na rôznych veľkostiach obrazovky. Táto značka je umiestnená vo vnútri „ ” a obsahuje dva atribúty. Prvým je „ názov “, ktorý hovorí o účele tejto značky a druhý je “ obsahu “, ktorý obsahuje údaje súvisiace s hodnotou uvedenou v „ názov “.
Rôzne atribúty metaznačky Viewport
Metaznačka viewport má nasledujúce atribúty, ktoré možno umiestniť ako hodnotu pre „ obsahu ” atribút:
atribút „šírka“.
' šírka ” určuje viditeľnú oblasť webovej stránky pre obsah vertikálne. Jeho metaznačka vyzerá takto:
< meta názov = 'výrez' obsahu = 'width=device-width' >
atribút „výška“.
' výška ” nastavuje vertikálnu dĺžku webovej stránky, aby sa zabezpečilo, že výška zobrazovanej oblasti zodpovedá výške obrazovky. Jeho metaznačka vyzerá takto:
< meta názov = 'výrez' obsahu = 'výška=400' >
Atribút „Initial-scale“.
' Počiatočná mierka ” zaisťuje, že sa webová stránka pri prvom načítaní zobrazí na vhodnej úrovni priblíženia. Navštívte napríklad nasledujúci kód:
< meta názov = 'výrez' obsahu = 'width=device-width, initial-scale=1.0' >atribút „maximálna mierka“.
' maximálna mierka ” určuje maximálnu úroveň priblíženia pre webovú stránku, aby sa predišlo problémom s rozložením:
< meta názov = 'výrez' obsahu = 'width=device-width, maximum-scale=1.0' >
atribút „minimálna mierka“.
' minimálna mierka ” sa používa na obmedzenie používateľa v prílišnom oddialení zadaním minimálnej úrovne mierky oddialenia:
< meta názov = 'výrez' obsahu = 'width=device-width, minimum-scale=0.5' >atribút „user-scalable“.
' užívateľsky škálovateľné “ povoľuje alebo nepovoľuje používateľovi oddialiť alebo priblížiť obrazovku webovej stránky nastavením hodnoty na „ Nie “ alebo „ Áno “. Metaznačka, ktorá umožňuje používateľovi priblížiť alebo oddialiť zobrazenie, je:
< meta názov = 'výrez' obsahu = 'width=device-width, user-scalable=yes' >Ako používať metaznačku Viewport pre responzívny webový dizajn v HTML?
Aby ste lepšie porozumeli použitiu metaznačky zobrazovanej oblasti pre responzívny webový dizajn. Poďme si prejsť príkladom:
Predpokladajme, že vnútri „ Po kompilácii vyššie uvedeného útržku kódu bude webová stránka vyzerať takto: Výstup zobrazuje, že obsah nereaguje, pretože sa na malých zariadeniach nezobrazuje dokonale. Teraz, aby to bolo responzívne, pridajte „ výrez ” metaznačka: Po aktualizácii kódu vyzerá webová stránka na rôznych veľkostiach obrazovky takto: Konečný výstup ilustruje, že webová stránka teraz reaguje po pridaní metaznačky do „ ” tag. Metaznačka viewport umožňuje vývojárovi poskytnúť súbor pokynov prehliadaču, ktorý nastaví, ako sa webová stránka zobrazí na zariadeniach s rôznymi veľkosťami obrazovky. Metaznačka je umiestnená vo vnútri „ ” a obsahuje atribúty, ktoré pomáhajú pri vytváraní responzívnych návrhov webových stránok. Tento blog ukázal, ako používať metaznačku zobrazenia pre responzívny webový dizajn v HTML. Značka ”: < div >
< p >
< b >Používa Linuxhint, aby ste lepšie porozumeli metaznačke zobrazenia, otvorte webovú stránku na inej obrazovke veľkosť zariadenia.< / b >
< / p >
< img src = '../bg.jpg' všetko = 'hacker' šírka = '460' výška = '3. 4. 5' >
< p štýl = 'padding:5px' >
< i >Pridajte sa k tímu Linuxhint < / i >
Používa Linuxhint, aby ste lepšie porozumeli metaznačke zobrazenia, otvorte webovú stránku na inej obrazovke veľkosť zariadenia. Používa Linuxhint, aby ste lepšie porozumeli metaznačke zobrazenia, otvorte webovú stránku na inej obrazovke veľkosť zariadenia. Používa Linuxhint, aby ste lepšie porozumeli metaznačke zobrazenia, otvorte webovú stránku na inej obrazovke veľkosť zariadenia. Používa Linuxhint, aby ste lepšie porozumeli metaznačke zobrazenia, otvorte webovú stránku na inej obrazovke veľkosť zariadení.
< / p >
< / div >
< meta názov = 'výrez' obsahu = 'width=device-width, initial-scale=1.0' / >
< / hlavu >
Záver