Tento článek ukazuje kroky k vytvoření responzivního designu webu v HTML a CSS pomocí:
Jak vytvořit responzivní webový design s HTML a CSS?
Vytvoření responzivního designu webu pomocí HTML a CSS zahrnuje vytvoření rozvržení, které se přizpůsobí různým velikostem obrazovky a rozlišení. Zde jsou kroky, které můžete použít k vytvoření responzivního designu webu:
Krok 1: Viewport Meta Tag
' výřez “ meta tag hraje zásadní roli při vytváření responzivního designu webu. Vkládá se dovnitř „
< meta název = 'výřez' obsah = 'width=device-width,initial-scale=1' / >
Výše uvedená metaznačka má dva atributy:
- ' název ” uvádí název funkce, pro kterou je tato značka vytvořena/použita. Například nastavení „ výřez “ na “ název ” atribut pro řešení výřezu různých zařízení.
- ' obsah ” definuje předchozí hodnotu atributu. Nastaví šířku každého zařízení a změní měřítko dokumentu/webové stránky na 100 %.
Krok 2: Responzivní obrázky
Vzhledem k tomu, že se velikost obrázku navzájem liší, je obtížné nastavit stejnou „ výška “ nebo „ šířka ” vlastnost pro každý obrázek. Když je velikost obrázku pevná, uživatelé nemění velikost obrázku webové stránky podle obrazovky. Uživatelé však mohou nastavit responzivní obrázek pomocí následujícího kódu:
img {
max- šířka : 100 %;
}
' max. šířka ” CSS vlastnost omezuje zobrazení obrázku uvnitř přiděleného prostoru. Nastavením hodnoty v „%“ se velikost obrázku změní spolu se změnou velikosti jeho rodičovského prvku. To vytváří citlivý efekt pro obrázek.
Krok 3: Rozvržení Flexboxu
Rozvržení Flexboxu se důrazně doporučuje pro vytvoření responzivního designu webových stránek. Umožňuje zobrazení prvků HTML na určité pozici a změnu velikosti dostupného prostoru pro každého potomka podle velikosti dostupné nadřazeným divem. Rozvržení Flexbox obsahuje několik vlastností, které poskytují vývojářům velkou svobodu, jako například v níže uvedeném kódu:
< styl >
.rodič {
displej: flex;
}
.dítě {
flex: 1 ;
text- zarovnat : střed;
}
< / styl >
< tělo >
< div třída = 'rodič' >
< div třída = 'dítě' styl = 'border: 3px solid blueviolet;' >Vítejte< / div >
< div třída = 'dítě' styl = 'ohraničení: 3px plné tmavě zelené;' >do< / div >
< div třída = 'dítě' styl = 'ohraničení: 3px plná červená;' >Linuxint< / div >
< / div >
< / tělo >
Ve výše uvedeném úryvku kódu:
- Nejprve vytvořte nadřazený prvek div s id „ rodič ' uvnitř ' ” tag.
- Dále vytvořte více podřízených prvků div a přiřaďte jim třídu „ dítě “.
- Poté vyberte „ rodič „třída a uveďte hodnotu „ flex “ pro CSS “ Zobrazit ' vlastnictví.
- Poté zadejte hodnotu „ 1 “ na “ flex „vlastnictví každému“ dítě ” třída, díky které se podřízený prvek zobrazí jako flex.
Po provedení výše uvedeného kódu vypadá webová stránka takto:
Výše uvedený výstup zobrazuje, že při změně velikosti prohlížeče získává podřízený prvek stejnou šířku.
Krok 4: Rozvržení mřížky
Rozvržení mřížky vytvoří mřížku a přiřadí prvky HTML uvnitř části mřížky. Prvky mřížky se mění v závislosti na velikosti obrazovky webové stránky. Vytváří responzivní design, když se velikost prvku HTML mění podle obrazovky zařízení:
< styl >.kontejner {
displej: mřížka;
mřížka-šablona-sloupce: 1fr 1fr 1fr;
}
< / styl >
< tělo >
< div třída = 'komponent' >
< div styl = 'border: 3px solid forestgreen;' >Linuxint< / div >
< div styl = 'ohraničení: 3px plné tmavě zelené;' >Linuxint< / div >
< div styl = 'ohraničení: 3px plná červená;' >Linuxint< / div >
< / div >
< / tělo >
Ve výše uvedeném kódu:
- Nejprve vytvořte nadřazený div a přiřaďte mu třídu „ komponent ' uvnitř ' ” tag. Poté v něm vytvořte tři podřízené prvky div.
- Poté v souboru CSS přiřaďte „ mřížka “hodnota k “ Zobrazit ' nemovitost pro ' kontejner “div.
- Poté vytvořte na webové stránce tři stejně velké části pomocí „ mřížka-šablona-sloupec ” a nastavte ji na hodnotu “ 1fr 1fr 1fr “ kde fr znamená “ zlomek “.
Po zkompilování výše uvedeného kódu vypadá výstup takto:
Výstup zobrazuje, že velikost divů se sama mění podle velikosti obrazovky se stejnými proporcemi.
Krok 5: Dotazy na média
Využití mediálních dotazů k vytvoření responzivního designu je druh staré školy, ale přesto většina webových stránek používá mediální dotazy. Dotazy na média lze přidat přímo do souboru CSS po přidání výchozího stylu pro vybraný prvek HTML. Dotaz na média dělá kód trochu delší a chaotický. Protože vývojář potřebuje vložit kód pro každou velikost obrazovky zvlášť.
Podívejte se například na níže uvedený fragment kódu:
@ média obrazovka a ( min- šířka : 640 pixelů ) {.komponent {
Pozadí- barva : lesní zelená;
}
}
Ve výše uvedeném úryvku kódu:
- Nejprve nastavte dotaz na média, který aplikuje vlastnosti CSS na vybranou třídu prvků “ komponent “, když je šířka obrazovky větší než “ 640 pixelů “.
- Dále vyberte „třídu komponent a nastavte hodnotu „ lesní zelená ' pro ' barva pozadí ' vlastnictví.
.komponent {
Pozadí- barva : dodgerblue;
}
}
Poté pro výše uvedený fragment kódu:
- Nastavte dotaz na média tak, aby aplikoval styly, když je velikost šířky menší než „ 1000 pixelů “.
- Nyní vyberte „ komponent „třída a uveďte hodnotu „ dodgerblue ' pro ' barva pozadí ' vlastnictví:
Po provedení výše uvedených úryvků kódu vypadá výstup takto:
Výstup zobrazí, že dotaz na média mění pozadí na základě velikosti obrazovky. Velikost písma, šířka, výška a další vlastnosti CSS lze také použít podle stejného vzoru.
Možné velikosti obrazovek s body přerušení, které je třeba vzít v úvahu při používání dotazů na média, jsou:
- Pro ' malý 'velikost obrazovky, nastavte šířku menší než ' 640 pixelů “.
- Pro ' střední ” velikost obrazovky výřezu, šířka se pohybuje mezi “ 641 pixelů ' a ' 1007 pixelů “.
- Pro ' velký “velikost obrazovky, nastavte šířku na “ 1008 pixelů “ nebo větší.
Závěr
K vytvoření responzivního designu webu musí vývojáři přidat „ výřez ” tag v “