Aké sú kroky na vytvorenie responzívneho dizajnu webových stránok pomocou HTML a CSS?

Tento článok ukazuje kroky na vytvorenie responzívneho dizajnu webových stránok v HTML a CSS pomocou:

• Metaznačka zobrazenia
• Responzívne obrázky
• Rozloženie Flexboxu
• Rozloženie mriežky
• Dotazy na médiá

Ako vytvoriť responzívny webový dizajn s HTML a CSS?

Vytvorenie responzívneho dizajnu webových stránok pomocou HTML a CSS zahŕňa vytvorenie rozloženia, ktoré sa prispôsobí rôznym veľkostiam obrazovky a rozlíšeniam. Pri vytváraní responzívneho dizajnu webových stránok môžete postupovať podľa nasledujúcich krokov:

Krok 1: Zobraziť metaznačku

' výrez “ meta tag hrá dôležitú úlohu pri vytváraní responzívneho dizajnu webu. Vkladá sa do „ ” tag súboru HTML, ktorý obsahuje nasledujúce atribúty:

Vyššie uvedená metaznačka má dva atribúty:

• ' názov ” uvádza názov funkcie, pre ktorú je táto značka vytvorená/používaná. Napríklad nastavenie „ výrez “ na “ názov ” na riešenie výrezu rôznych zariadení.
• ' obsahu ” definuje predchádzajúcu hodnotu atribútu. Nastaví šírku každého zariadenia a upraví veľkosť dokumentu/webovej stránky na 100 %.

Krok 2: Responzívne obrázky

Keďže veľkosť obrázka sa navzájom líši, je ťažké nastaviť rovnakú „ výška “ alebo „ šírka ” vlastnosť pre každý obrázok. Keď je veľkosť obrázka pevná, používatelia nezmenia veľkosť obrázka webovej stránky s obrazovkou. Používatelia však môžu nastaviť responzívny obrázok pomocou nasledujúceho kódu:

' max-šírka ” CSS vlastnosť obmedzuje zobrazenie obrázka v rámci prideleného priestoru. Nastavením hodnoty v „%“ sa veľkosť obrázka zmení spolu so zmenou veľkosti jeho nadradeného prvku. To vytvára citlivý efekt pre obrázok.

Krok 3: Rozloženie Flexbox

Rozloženie Flexbox sa dôrazne odporúča na vytvorenie responzívneho dizajnu webových stránok. Umožňuje, aby sa prvky HTML zobrazovali na určitej pozícii a zmenili veľkosť dostupného priestoru pre každého potomka podľa veľkosti dostupnej pre rodičovský div. Rozloženie Flexbox obsahuje niekoľko vlastností, ktoré poskytujú vývojárom veľkú slobodu, ako napríklad v nižšie uvedenom kóde:

Vo vyššie uvedenom útržku kódu:

• Najprv vytvorte nadradený prvok div s ID „ rodič ' vnútri ' ” tag.
• Ďalej vytvorte viacero podradených prvkov div a priraďte im triedu „ dieťa “.
• Potom vyberte „ rodič „trieda a uveďte hodnotu „ flex “ pre CSS “ displej ' nehnuteľnosť.
• Potom zadajte hodnotu „ 1 “ na “ flex „vlastnosť každému“ dieťa ” trieda, vďaka ktorej sa podriadený prvok zobrazí ako flex.

Po vykonaní vyššie uvedeného kódu bude webová stránka vyzerať takto:

Vyššie uvedený výstup zobrazuje, že pri zmene veľkosti prehliadača získava podradený prvok rovnakú šírku.

Krok 4: Rozloženie mriežky

Rozloženie mriežky vytvorí mriežku a priradí prvky HTML vnútri časti mriežky. Prvky mriežky sa menia v závislosti od veľkosti obrazovky webovej stránky. Vytvára responzívny dizajn, keď sa veľkosť prvku HTML mení podľa obrazovky zariadenia:

Vo vyššie uvedenom kóde:

• Najprv vytvorte nadradený div a priraďte mu triedu „ komponent ' vnútri ' ” tag. Potom v ňom vytvorte tri podradené prvky div.
• Potom v súbore CSS priraďte „ mriežka “hodnota k “ displej “vlastnosť pre “ kontajner ” div.
• Potom vytvorte na webovej stránke tri rovnako veľké časti pomocou „ mriežka-šablóna-stĺpec vlastnosť a nastavte ju na hodnotu „ 1fr 1fr 1fr “ kde fr znamená “ zlomok “.

Po skompilovaní vyššie uvedeného kódu bude výstup vyzerať takto:

Výstup zobrazuje, že veľkosť divov sa mení podľa veľkosti obrazovky s rovnakými proporciami.

Krok 5: Dotazy na médiá

Použitie mediálnych dopytov na vytvorenie responzívneho dizajnu je druh starej školy, ale stále väčšina webových stránok používa mediálne dopyty. Dotazy na médiá je možné pridať priamo do súboru CSS po pridaní predvoleného štýlu pre vybraný prvok HTML. Dopyt na médiá spôsobuje, že kód je trochu dlhší a chaotický. Pretože vývojár potrebuje vložiť kód pre každú veľkosť obrazovky zvlášť.

Pozrite si napríklad nasledujúci útržok kódu:

Vo vyššie uvedenom útržku kódu:

• Najprv nastavte mediálny dotaz, ktorý aplikuje vlastnosti CSS na vybranú triedu prvkov “ komponent “, keď je šírka obrazovky väčšia ako „ 640 pixelov “.
• Ďalej vyberte „triedu komponentov a nastavte hodnotu „ lesná zeleň ' pre ' farba pozadia ' nehnuteľnosť.

Potom pre vyššie uvedený útržok kódu:

• Nastavte dopyt na médiá tak, aby aplikoval štýly, keď je veľkosť šírky menšia ako „ 1000 pixelov “.
• Teraz vyberte „ komponent „trieda a uveďte hodnotu „ dodgerblue ' pre ' farba pozadia ' nehnuteľnosť:

Po vykonaní vyššie uvedených útržkov kódu bude výstup vyzerať takto:

Výstup zobrazuje, že mediálny dotaz mení pozadie na základe veľkosti obrazovky. Veľkosť písma, šírka, výška a ďalšie vlastnosti CSS možno použiť podľa rovnakého vzoru.

Možné veľkosti obrazoviek prerušenia, ktoré je potrebné zvážiť pri používaní mediálnych dopytov, sú:

• Pre „ malý “veľkosť obrazovky, nastavte šírku menšiu ako “ 640 pixelov “.
• Pre „ stredná „veľkosť obrazovky výrezu, šírka sa pohybuje medzi „ 641 pixelov “ a „ 1007 pixelov “.
• Pre „ veľký “veľkosť obrazovky, nastavte šírku na “ 1008 pixelov “ alebo väčší.

Záver

Na vytvorenie responzívneho dizajnu webových stránok musia vývojári pridať „ výrez ” tag v “ sekcia tagov. Ďalej použite „ Flexbox “ a „ Mriežka „Rozloženie. Tieto moduly rozloženia pomáhajú vytvárať responzívny dizajn. Na záver, „ mediálne otázky ” pomôže vývojárom upraviť rôzne verzie tej istej webovej lokality pre rôzne veľkosti obrazovky. Tento článok demonštroval kroky, pomocou ktorých je možné vytvoriť responzívny dizajn webu.