Još jedan čimbenik koji vodi prema fokusiranju na responzivni dizajn prvenstveno mobilnom pristupu je da većina ljudi pristupa internetu putem svojih mobilnih uređaja, što je 60%. Dok samo 20% ljudi koristi internet na stolnim računalima.
Ovaj će članak pokriti upute za izradu responzivnog dizajna za mobilne uređaje.
Kako postaviti Mobile-First Responsive Design?
Responzivni dizajn bez obzira na to je li riječ o responzivnom modelu za mobilne uređaje ili za veće zaslone, može se izraditi slijedeći dolje navedene metode:
- Stvorite responzivni dizajn za mobilne uređaje.
- Upotrijebite medijski upit za razvoj/stvorenje responzivnog dizajna za veće zaslone.
Metoda 1: Stvorite mobilni prvi responzivni dizajn
Prvo, počnite s izradom pristupa dizajnu koji je prvenstveno mobilni. U tu svrhu prođite dolje navedene upute korak po korak.
Korak 1: Napravite HTML strukturu
Najprije izradite HTML strukturu i dodajte ' Bootstrap ” u
< ul >
< da >< a href = '#' > Dom < / a >< / da >
< da >< a href = '#' > O nama < / a >< / da >
< da >< a href = '#' > Naše usluge < / a >< / da >
< da >< a href = '#' > Kontaktirajte nas < / a >< / da >
< / ul >
< / ne>
< / zaglavlje>
< h1 > Dobrodošli u Linux Hint < / h1 >
< str > Web stranica s uputama. < / str >
< / odjeljak>
< / glavno>
< str > Linux savjet Autorska prava < / str >
< / podnožje>
< / tijelo >
Korak 2: Primijenite CSS
U odjeljku tijela postavite ' obitelj-fontova ” do “ sans serif ”. Također postavite ispunu, marginu i boju pozadine. Nakon toga primijenite CSS na zaglavlje, podnožje i navigaciju:
tijelo {obitelj-fontova : sans serif ;
margina : 0 ;
podstava : 0 ;
boja pozadine : #808080 ;
}
Zaglavlje {
boja pozadine : ljubičasta ;
boja : bijela ;
podstava : 8 px ;
}
nav ul {
lista-stil-tip : nikakav ;
podstava : 0 ;
margina : 0 ;
}
njihov brod {
margina : 4 px 0 ;
}
nav ul li a {
boja : bijela ;
tekst-ukras : nikakav ;
}
glavni {
podstava : 18 px ;
}
podnožje {
boja pozadine : ružičasta ;
boja : bijela ;
poravnanje teksta : centar ;
podstava : 8 px ;
}
Kao što se može primijetiti, rezultat u nastavku potvrdio je da je dizajn prilagođen prvenstveno mobilnim uređajima:
Metoda 2: Koristite medijske upite za izradu responzivnog dizajna za veće zaslone
Gornji dizajn također se može izraditi za veće zaslone kao što su tableti i stolna računala. U tu svrhu korisnici trebaju uključiti medijski upit u CSS. Širina za tablete je ' 786 px ', a za stolna računala je ' 1024 px ”.
Da biste primijenili medijske upite, prvo uključite ' @mediji ” u CSS datoteci. Nakon toga odredite svojstvo 'min-width' kao ' 768 px ”. To znači da kad god je minimalna veličina zaslona '768px' ili veća, primjenjivat će se sljedeći CSS:
@mediji ( min-širina : 768 px ) {tijelo {
veličina fonta : 14 px ;
}
Zaglavlje {
podstava : 18 px ;
}
nav ul {
prikaz : savijati ;
}
njihov brod {
margina : 0 8 px ;
}
glavni {
prikaz : savijati ;
opravdati-sadržaj : razmak između ;
align-items : centar ;
}
podnožje {
podstava : 18 px ;
}
}
Rezultat u nastavku pokazao je da je dizajn također osjetljiv na veće zaslone:
Zaključak
Da biste postavili responzivni dizajn prvenstveno za mobilne uređaje, prvo izradite HTML strukturu i dodajte okvir za prikaz. Nakon toga povežite CSS datoteku u oznaci head. Zatim primijenite CSS koji se temelji na responzivnom dizajnu prvenstveno za mobilne uređaje. Nadalje, korisnici mogu dodati CSS medijski upit za podešavanje na mobilnom uređaju. Ovaj tekst je pokazao detaljnu proceduru za postavljanje responzivnog dizajna za mobilne uređaje.