Egy másik tényező, amely a mobil-elsőként reszponzív tervezésre való összpontosítás felé vezet, az, hogy a legtöbben mobileszközükön keresztül érik el az internetet, ami 60%. Míg az emberek mindössze 20%-a használja az internetet asztali számítógépen.
Ez a cikk a mobil-elsőként reszponzív kialakítás létrehozására vonatkozó utasításokat tartalmazza.
Hogyan állítsunk be először mobilra reagáló tervezést?
A reszponzív dizájn, legyen szó akár mobilra reagáló, akár nagyobb képernyőkről, az alábbi módszerekkel hozható létre:
- Hozzon létre egy mobil-első reszponzív dizájnt.
- Használja/használja a médialekérdezést nagyobb képernyőkhöz való reszponzív kialakítás fejlesztésére/létrehozására.
1. módszer: Hozzon létre egy mobil-elsősorban érzékeny dizájnt
Először is kezdje a mobil-első tervezési megközelítés létrehozásával. Ebből a célból kövesse az alábbi lépésenkénti utasításokat.
1. lépés: Hozzon létre egy HTML-struktúrát
Először hozzon létre egy HTML-struktúrát, és adjon hozzá egy ' Bootstrap ' ban,-ben
< ul >
< hogy >< a href = '#' > itthon < / a >< / hogy >
< hogy >< a href = '#' > Rólunk < / a >< / hogy >
< hogy >< a href = '#' > Szolgáltatásaink < / a >< / hogy >
< hogy >< a href = '#' > Lépjen kapcsolatba velünk < / a >< / hogy >
< / ul >
< / nem>
< / fejléc>
< h1 > Üdvözli a Linux Hint < / h1 >
< p > Egy oktatóanyag webhely. < / p >
< / szakasz>
< / fő>
< p > Linux tipp Copyright < / p >
< / lábléc>
< / test >
2. lépés: Alkalmazza a CSS-t
A törzsrészben állítsa be a „ betűtípus család ' nak nek ' sans serif ”. Állítsa be a kitöltést, a margót és a háttérszínt is. Ezt követően alkalmazza a CSS-t a fejlécben, a láblécben és a navigációban:
test {betűtípus család : sans serif ;
árrés : 0 ;
párnázás : 0 ;
háttérszín : #808080 ;
}
fejléc {
háttérszín : lila ;
szín : fehér ;
párnázás : 8 képpont ;
}
nav ul {
lista-stílusú : egyik sem ;
párnázás : 0 ;
árrés : 0 ;
}
a hajójukat {
árrés : 4 képpont 0 ;
}
nav ul li a {
szín : fehér ;
szöveg-dekoráció : egyik sem ;
}
fő- {
párnázás : 18 képpont ;
}
lábléc {
háttérszín : rózsaszín ;
szín : fehér ;
szöveg igazítás : központ ;
párnázás : 8 képpont ;
}
Amint látható, az alábbi kimenet megerősítette, hogy a tervezés mobil-elsőként reagál:
2. módszer: Használjon médialekérdezéseket a nagyobb képernyőkhöz érzékeny tervezés létrehozásához
A fenti kialakítás nagyobb képernyőkre, például táblagépekre és asztali számítógépekre is elkészíthető. Ebből a célból a felhasználóknak bele kell foglalniuk a médialekérdezést a CSS-be. A tabletták szélessége ' 786 képpont ', asztali számítógépeknél pedig ' 1024 képpont ”.
A médialekérdezések alkalmazásához először adja meg a „ @média ” címkét a CSS-fájlban. Ezután adja meg a „min-width” tulajdonságot a „ 768 képpont ”. Ez azt jelenti, hogy ha a minimális képernyőméret „768 képpont” vagy nagyobb, akkor a következő CSS lesz érvényes:
@média ( min-szélesség : 768 képpont ) {test {
betűméret : 14 képpont ;
}
fejléc {
párnázás : 18 képpont ;
}
nav ul {
kijelző : Flex ;
}
a hajójukat {
árrés : 0 8 képpont ;
}
fő- {
kijelző : Flex ;
indokolja-tartalom : tér-között ;
align-ites : központ ;
}
lábléc {
párnázás : 18 képpont ;
}
}
Az alábbi kimenet azt mutatja, hogy a tervezés nagyobb képernyőkön is érzékeny:
Következtetés
A mobil-elsőként reszponzív kialakítás beállításához először hozzon létre egy HTML-struktúrát, és adja hozzá a nézetablakot. Ezután kapcsolja be a CSS-fájlt a head címkében. Ezután alkalmazza a CSS-t a mobil-elsőként reszponzív dizájn alapján. Ezenkívül a felhasználók hozzáadhatják a CSS-médialekérdezést, hogy módosítsák a mobileszközön. Ez az írás egy részletes eljárást mutat be a mobil-elsőként érzékeny kialakítás létrehozásához.