Drugi dejavnik, ki vodi k osredotočenju na odzivni dizajn, ki je najprej mobilno, je, da večina ljudi dostopa do interneta prek svojih mobilnih naprav, kar 60 %. Medtem ko le 20 % ljudi uporablja internet na namiznih računalnikih.
Ta članek bo zajemal navodila za ustvarjanje odzivnega dizajna, ki je najprej mobilno.
Kako nastaviti odzivni dizajn Mobile-First?
Odzivno zasnovo, ne glede na to, ali je odzivna na mobilne naprave ali za večje zaslone, je mogoče ustvariti z upoštevanjem spodaj navedenih metod:
- Ustvarite odzivno zasnovo, ki je najprej mobilna.
- Uporabite/uporabite medijsko poizvedbo za razvoj/ustvarjanje odzivnega dizajna za večje zaslone.
1. način: ustvarite odzivno zasnovo Mobile-First
Najprej začnite z ustvarjanjem pristopa oblikovanja, ki je na prvem mestu mobilno. V ta namen si oglejte spodnja navodila po korakih.
1. korak: Ustvarite strukturo HTML
Najprej ustvarite strukturo HTML in dodajte » Bootstrap ” v
< ul >
< to >< a href = '#' > domov < / a >< / to >
< to >< a href = '#' > O nas < / a >< / to >
< to >< a href = '#' > naše storitve < / a >< / to >
< to >< a href = '#' > Kontaktiraj nas < / a >< / to >
< / ul >
< / ne>
< / glava>
< h1 > Dobrodošli v namig za Linux < / h1 >
< str > Spletno mesto z vadnicami. < / str >
< / razdelek>
< / glavno>
< str > Namig za Linux Avtorske pravice < / str >
< / noga>
< / telo >
2. korak: Uporabite CSS
V razdelku telesa nastavite » družina pisav ' do ' sans serif ”. Nastavite tudi oblazinjenje, rob in barvo ozadja. Nato uporabite CSS v glavi, nogi in navigaciji:
telo {družina pisav : sans serif ;
marža : 0 ;
oblazinjenje : 0 ;
Barva ozadja : #808080 ;
}
glava {
Barva ozadja : vijolična ;
barva : bela ;
oblazinjenje : 8 slikovnih pik ;
}
nav ul {
list-style-type : nič ;
oblazinjenje : 0 ;
marža : 0 ;
}
njihova ladja {
marža : 4px 0 ;
}
nav ul li a {
barva : bela ;
besedilo-okras : nič ;
}
glavni {
oblazinjenje : 18 slikovnih pik ;
}
noga {
Barva ozadja : roza ;
barva : bela ;
poravnava besedila : center ;
oblazinjenje : 8 slikovnih pik ;
}
Kot lahko opazimo, je spodnji izid potrdil, da je zasnova odzivna najprej na mobilne naprave:
2. način: uporabite medijske poizvedbe za ustvarjanje odzivnega dizajna za večje zaslone
Zgornji dizajn je mogoče ustvariti tudi za večje zaslone, kot so tablice in namizni računalniki. V ta namen morajo uporabniki vključiti medijsko poizvedbo v CSS. Širina za tablice je ' 786 slikovnih pik « in za namizne računalnike je » 1024 slikovnih pik ”.
Če želite uporabiti medijske poizvedbe, najprej vključite » @mediji ” v datoteki CSS. Po tem določite lastnost »min-width« kot » 768 slikovnih pik ”. To pomeni, da kadar koli je dosežena najmanjša velikost zaslona »768 slikovnih pik« ali več, bo veljal naslednji CSS:
@mediji ( najmanjša širina : 768 slikovnih pik ) {telo {
velikost pisave : 14 slikovnih pik ;
}
glava {
oblazinjenje : 18 slikovnih pik ;
}
nav ul {
zaslon : flex ;
}
njihova ladja {
marža : 0 8 slikovnih pik ;
}
glavni {
zaslon : flex ;
justify-content : presledek med ;
align-items : center ;
}
noga {
oblazinjenje : 18 slikovnih pik ;
}
}
Spodnji rezultat je pokazal, da je dizajn odziven tudi na večjih zaslonih:
Zaključek
Če želite nastaviti odzivno zasnovo, ki je najprej mobilna, najprej ustvarite strukturo HTML in dodajte vidno polje. Po tem povežite datoteko CSS v oznaki head. Nato uporabite CSS, ki temelji na odzivnem oblikovanju, ki je najprej mobilno. Poleg tega lahko uporabniki dodajo medijsko poizvedbo CSS za prilagoditev v mobilni napravi. Ta prispevek je pokazal podroben postopek za vzpostavitev odzivnega dizajna, ki je najprej mobilno.