Un altre factor que porta a centrar-se en el disseny responsiu per a mòbils és que la majoria de la gent accedeix a Internet mitjançant els seus dispositius mòbils, que és del 60%. Mentre que només el 20% de la gent utilitza Internet als ordinadors de sobretaula.
Aquest article tractarà les instruccions per crear el disseny responsiu per a mòbils.
Com configurar Mobile-First Responsive Design?
El disseny responsiu, tant si és responsiu per a mòbils com per a pantalles més grans, es pot crear seguint els mètodes que s'indiquen a continuació:
- Creeu un disseny responsiu per a mòbils.
- Utilitzeu/utilitza la consulta de mitjans per desenvolupar/crear un disseny responsiu per a pantalles més grans.
Mètode 1: creeu un disseny responsiu per a mòbils primer
En primer lloc, comenceu per crear l'enfocament de disseny per a mòbils. Per a això, seguiu les instruccions pas a pas que es proporcionen a continuació.
Pas 1: creeu una estructura HTML
Primer, creeu una estructura HTML i afegiu un ' Bootstrap ” a la
< ul >
< això >< a href = '#' > a casa < / a >< / això >
< això >< a href = '#' > Sobre nosaltres < / a >< / això >
< això >< a href = '#' > els nostres serveis < / a >< / això >
< això >< a href = '#' > Contacta amb nosaltres < / a >< / això >
< / ul >
< / no>
< / capçalera>
< h1 > Benvingut a Linux Hint < / h1 >
< pàg > Un lloc web de tutorials. < / pàg >
< / secció>
< / principal>
< pàg > Linux Hint Copyright < / pàg >
< / peu de pàgina>
< / cos >
Pas 2: apliqueu CSS
A la secció del cos, configureu el ' família de tipus de lletra ' a ' sans serif ”. També configureu el farciment, el marge i el color de fons. Després d'això, apliqueu CSS a la capçalera, el peu de pàgina i la navegació:
cos {família de tipus de lletra : sans serif ;
marge : 0 ;
farciment : 0 ;
color de fons : #808080 ;
}
capçalera {
color de fons : porpra ;
color : blanc ;
farciment : 8 píxels ;
}
navegació ul {
tipus de llista d'estil : cap ;
farciment : 0 ;
marge : 0 ;
}
el seu vaixell {
marge : 4 píxels 0 ;
}
nav ul li a {
color : blanc ;
text-decoració : cap ;
}
principal {
farciment : 18 píxels ;
}
peu de pàgina {
color de fons : rosa ;
color : blanc ;
alineació de text : centre ;
farciment : 8 píxels ;
}
Com es pot observar, la sortida següent ha confirmat que el disseny respon a mòbils primer:
Mètode 2: utilitzeu les consultes de mitjans per crear un disseny responsiu per a pantalles més grans
El disseny anterior també es pot crear per a pantalles més grans, com ara tauletes i ordinadors de sobretaula. Per a això, els usuaris han d'incloure la consulta de mitjans al CSS. L'amplada de les tauletes és ' 786 píxels ” i per a ordinadors de sobretaula és “ 1024 píxels ”.
Per aplicar les consultes de mitjans, primer, incloeu el ' @media ” al fitxer CSS. Després d'això, especifiqueu la propietat 'amplada mínima' com a ' 768 píxels ”. Això vol dir que sempre que es compleixi la mida mínima de pantalla '768px' o superior, s'aplicarà el següent CSS:
@media ( amplada mínima : 768 píxels ) {cos {
mida de la font : 14 píxels ;
}
capçalera {
farciment : 18 píxels ;
}
navegació ul {
visualització : flexionar ;
}
el seu vaixell {
marge : 0 8 píxels ;
}
principal {
visualització : flexionar ;
justificar-contingut : espai-entre ;
alinear elements : centre ;
}
peu de pàgina {
farciment : 18 píxels ;
}
}
La sortida següent va demostrar que el disseny també respon a pantalles més grans:
Conclusió
Per configurar un disseny responsiu per a mòbils, primer, creeu una estructura HTML i afegiu la finestra gràfica. Després d'això, enllaceu el fitxer CSS a l'etiqueta head. A continuació, apliqueu CSS basat en un disseny responsiu per a mòbils. A més, els usuaris poden afegir la consulta multimèdia CSS per ajustar-la al dispositiu mòbil. Aquest escrit ha demostrat un procediment detallat per configurar un disseny responsiu per a mòbils.