Un alt factor care duce la concentrarea asupra designului responsiv pentru dispozitive mobile este că majoritatea oamenilor accesează internetul prin intermediul dispozitivelor lor mobile, ceea ce reprezintă 60%. În timp ce doar 20% dintre oameni folosesc internetul pe desktop-uri.
Acest articol va acoperi instrucțiunile pentru crearea designului receptiv pentru dispozitive mobile.
Cum se configurează Mobile-First Responsive Design?
Design-ul responsive, indiferent dacă este mobil mai întâi responsive sau pentru ecrane mai mari, poate fi creat urmând metodele de mai jos:
- Creați un design receptiv pentru dispozitive mobile.
- Utilizați/utilizați interogarea media pentru a dezvolta/crea un design receptiv pentru ecrane mai mari.
Metoda 1: Creați un design receptiv pentru mobil mai întâi
În primul rând, începeți cu crearea abordării de proiectare pe mobil, pe primul loc. În acest scop, parcurgeți instrucțiunile treptate furnizate mai jos.
Pasul 1: Creați o structură HTML
Mai întâi, creați o structură HTML și adăugați un „ Bootstrap ' în
< ul >
< acea >< A href = '#' > Acasă < / A >< / acea >
< acea >< A href = '#' > Despre noi < / A >< / acea >
< acea >< A href = '#' > Serviciile noastre < / A >< / acea >
< acea >< A href = '#' > Contactaţi-ne < / A >< / acea >
< / ul >
< / nu>
< / antet>
< h1 > Bun venit la Linux Hint < / h1 >
< p > Un site de tutoriale. < / p >
< / sectiune>
< / principal>
< p > Linux Hint Copyright < / p >
< / subsol>
< / corp >
Pasul 2: Aplicați CSS
În secțiunea corpului, setați „ familie de fonturi ' la ' sans serif ”. Setați, de asemenea, umplutura, marginea și culoarea de fundal. După aceea, aplicați CSS pe antet, subsol și navigare:
corp {familie de fonturi : sans serif ;
marginea : 0 ;
umplutura : 0 ;
culoare de fundal : #808080 ;
}
antet {
culoare de fundal : Violet ;
culoare : alb ;
umplutura : 8px ;
}
nav ul {
tip-list-stil : nici unul ;
umplutura : 0 ;
marginea : 0 ;
}
nav ul li {
marginea : 4px 0 ;
}
nav ul li a {
culoare : alb ;
text-decor : nici unul ;
}
principal {
umplutura : 18px ;
}
subsol {
culoare de fundal : roz ;
culoare : alb ;
aliniere text : centru ;
umplutura : 8px ;
}
După cum se poate observa, rezultatul de mai jos a confirmat că designul este receptiv mai întâi pe mobil:
Metoda 2: Utilizați interogări media pentru a crea un design receptiv pentru ecrane mai mari
Designul de mai sus poate fi creat și pentru ecrane mai mari, cum ar fi tablete și desktop-uri. În acest scop, utilizatorii trebuie să includă interogare media în CSS. Lățimea pentru tablete este „ 786px ” iar pentru desktop-uri este „ 1024px ”.
Pentru a aplica interogările media, mai întâi, includeți „ @mass-media ” în fișierul CSS. După aceea, specificați proprietatea „min-width” ca „ 768px ”. Aceasta înseamnă că ori de câte ori dimensiunea minimă a ecranului „768px” sau mai mare este îndeplinită, se va aplica următorul CSS:
@mass-media ( lățime minimă : 768px ) {corp {
marimea fontului : 14px ;
}
antet {
umplutura : 18px ;
}
nav ul {
afişa : contracta ;
}
nav ul li {
marginea : 0 8px ;
}
principal {
afişa : contracta ;
justifica-conținut : spațiu-între ;
alinierea elementelor : centru ;
}
subsol {
umplutura : 18px ;
}
}
Rezultatul de mai jos a demonstrat că designul este receptiv și pe ecrane mai mari:
Concluzie
Pentru a configura un design adaptabil pentru dispozitive mobile, mai întâi, creați o structură HTML și adăugați fereastra. După aceea, conectați fișierul CSS în eticheta head. Apoi, aplicați CSS pe baza designului receptiv pentru dispozitive mobile. În plus, utilizatorii pot adăuga interogarea media CSS pentru a se ajusta pe dispozitivul mobil. Acest articol a demonstrat o procedură detaliată pentru a configura un design responsiv pentru dispozitive mobile.