Ez a cikk bemutatja a reszponzív webhelydizájn létrehozásának lépéseit HTML-ben és CSS-ben a következőkkel:
Hogyan készítsünk reszponzív weboldaltervezést HTML és CSS segítségével?
A HTML- és CSS-alapú reszponzív webhelykialakításhoz olyan elrendezést kell létrehozni, amely alkalmazkodik a különböző képernyőméretekhez és -felbontásokhoz. Az alábbi lépések követésével hozhat létre reszponzív webhelytervezést:
1. lépés: Nézetablak metacímke
A ' nézetablak ” metatag létfontosságú szerepet játszik a reszponzív webdizájn létrehozásában. A „
< meta név = 'nézőablak' tartalom = 'width=device-width,initial-scale=1' / >
A fenti metacímkének két attribútuma van:
- A ' név ” attribútum annak a funkciónak a nevét adja meg, amelyhez ezt a címkét létrehozták/használják. Például a „ nézetablak ' hoz ' név ” attribútum a különböző eszközök nézetablakának kezelésére.
- A ' tartalom ” attribútum határozza meg az előző attribútumértéket. Beállítja minden eszköz szélességét, és 100%-ra méretezi a dokumentumot/weblapot.
2. lépés: Reszponzív képek
Mivel a képméretek eltérnek egymástól, ezért nehéz ugyanazt beállítani magasság ” vagy „ szélesség ” tulajdonság minden képhez. Ha a kép mérete rögzített, akkor a felhasználók nem méretezik át a weboldal képét a képernyővel együtt. A felhasználók azonban beállíthatják a reszponzív képet a következő kóddal:
img {
max- szélesség : 100 %;
}
A ' max szélesség ” A CSS tulajdonság korlátozza a kép megjelenítését a lefoglalt területen. A „%” érték beállításával a kép átméreteződik a szülőelem méretével együtt. Ez érzékeny hatást hoz létre a képen.
3. lépés: Flexbox elrendezés
A Flexbox elrendezés erősen ajánlott egy reszponzív weboldal kialakításához. Lehetővé teszi, hogy a HTML elemek egy adott helyen jelenjenek meg, és átméretezzék a rendelkezésre álló helyet minden egyes gyermek számára a szülő div által elérhető méretnek megfelelően. A Flexbox elrendezés számos olyan tulajdonságot tartalmaz, amelyek nagy szabadságot biztosítanak a fejlesztőnek, például az alábbi kódban:
< stílus >
.szülő {
kijelző: flex;
}
.gyermek {
Flex: 1 ;
szöveg- igazítsa : középen;
}
< / stílus >
< test >
< div osztály = 'szülő' >
< div osztály = 'gyermek' stílus = 'szegély: 3 képpont tömör kékibolya;' >Üdvözöllek< / div >
< div osztály = 'gyermek' stílus = 'szegély: 3 képpont tömör sötétzöld;' >hoz< / div >
< div osztály = 'gyermek' stílus = 'szegély: 3 képpont egyszínű piros;' >Linuxint< / div >
< / div >
< / test >
A fenti kódrészletben:
- Először hozzon létre egy szülő div elemet, amelynek azonosítója ' szülő ' benne '
” címke. - Ezután hozzon létre több gyermek div elemet, és rendeljen hozzá egy osztályt gyermek ”.
- Ezután válassza ki a „ szülő ' osztály, és adja meg a ' Flex 'a CSS-hez' kijelző ' ingatlan.
- Ezt követően adja meg a „ 1 ' hoz ' Flex 'tulajdon minden' gyermek ” osztály, amely a gyermek elemet flexként jeleníti meg.
A fenti kód végrehajtása után a weboldal így néz ki:
A fenti kimenet azt mutatja, hogy a gyermek elem azonos szélességet kap a böngésző átméretezésekor.
4. lépés: Rács elrendezés
A rács elrendezés létrehoz egy rácsot, és hozzárendeli a HTML elemeket a rácsrészen belül. A rácselemek a weboldal képernyőméretéhez képest változnak. Reszponzív kialakítást hoz létre, mivel a HTML-elem mérete az eszköz képernyőjének megfelelően változik:
< stílus >.tartály {
kijelző: rács;
rács-sablon-oszlopok: 1fr 1fr 1fr;
}
< / stílus >
< test >
< div osztály = 'összetevő' >
< div stílus = 'szegély: 3 képpont tömör erdőzöld;' >Linuxint< / div >
< div stílus = 'szegély: 3 képpont tömör sötétzöld;' >Linuxint< / div >
< div stílus = 'szegély: 3 képpont egyszínű piros;' >Linuxint< / div >
< / div >
< / test >
A fenti kódban:
- Először hozzon létre egy szülő divet, és rendeljen hozzá egy osztályt összetevő ' benne '
” címke. Ezután hozzon létre benne három gyermek div elemet. - Ezután a CSS-fájlban rendeljen hozzá egy „ rács ' érték a ' kijelző ' ingatlan a ' tartály ” div.
- Ezután hozzon létre három egyforma méretű részt a weboldalon a „ rács-sablon-oszlop ' tulajdonságot, és állítsa egyenlőnek: ' 1 fr 1 fr 1 fr 'ahol az fr jelentése ' töredék ”.
A fenti kód lefordítása után a kimenet így néz ki:
A kimenet azt mutatja, hogy a divek a képernyő méretének megfelelően, egyenlő arányban méretezik át magukat.
5. lépés: Médialekérdezések
A médialekérdezések használata a reszponzív tervezéshez egyfajta régimódi dolog, de ennek ellenére a legtöbb webhely médialekérdezéseket használ. A médialekérdezések közvetlenül hozzáadhatók a CSS-fájlhoz, miután hozzáadta az alapértelmezett stílust a kiválasztott HTML-elemhez. A médialekérdezés egy kicsit hosszabbá és rendetlenné teszi a kódot. Mivel a fejlesztőnek minden képernyőmérethez külön-külön kell beillesztenie a kódot.
Lásd például az alábbi kódrészletet:
@ média képernyő és ( min- szélesség : 640 képpont ) {.összetevő {
háttér- szín : erdő zöld;
}
}
A fenti kódrészletben:
- Először állítsa be azt a médialekérdezést, amely a CSS-tulajdonságokat alkalmazza a kiválasztott elemosztályhoz ' összetevő ', ha a képernyő méretének szélessége nagyobb lesz, mint ' 640 képpont ”.
- Ezután válassza ki az 'összetevő osztályt, és állítsa be a ' erdő zöld ' a ' háttérszín ' ingatlan.
.összetevő {
háttér- szín : dodgerblue;
}
}
Ezután a fenti kódrészlethez:
- Állítsa be a médialekérdezést, hogy stílusokat alkalmazzon, ha a szélesség mérete kisebb, mint ' 1000 képpont ”.
- Most válassza ki a „ összetevő ' osztályba, és adjon meg egy ' értéket dodgerblue ' a ' háttérszín ' ingatlan:
A fenti kódrészletek végrehajtása után a kimenet így néz ki:
A kimenet azt mutatja, hogy a médialekérdezés a képernyő mérete alapján megváltoztatja a hátteret. A betűméret, -szélesség,-magasság és egyéb CSS-tulajdonságok szintén alkalmazhatók ugyanazon minta követésével.
A médialekérdezések használatakor figyelembe veendő lehetséges töréspontok képernyőméretei:
- a „ kicsi ' képernyőméret, állítsa a szélességet kisebbre, mint ' 640 képpont ”.
- a „ közepes ” nézetablak képernyőmérete, a szélesség ” között mozog 641 képpont ” és „ 1007 képpont ”.
- a „ nagy ' képernyőméret, állítsa a szélességet '' 1008 képpont ” vagy nagyobb.
Következtetés
A reszponzív weboldal kialakításához a fejlesztőknek hozzá kell adniuk a „ nézetablak ' címke a '