Otro factor que lleva a centrarse en un diseño responsivo que dé prioridad a los dispositivos móviles es que la mayoría de las personas acceden a Internet a través de sus dispositivos móviles, que es el 60%. Mientras que sólo el 20% de la gente utiliza Internet en sus ordenadores de escritorio.
Este artículo cubrirá las instrucciones para crear el diseño responsivo para dispositivos móviles.
¿Cómo configurar un diseño responsivo que dé prioridad a los dispositivos móviles?
El diseño responsivo, ya sea que responda primero a dispositivos móviles o para pantallas más grandes, se puede crear siguiendo los métodos que se detallan a continuación:
- Cree un diseño responsivo para dispositivos móviles.
- Utilice/utilice la consulta de medios para desarrollar/crear un diseño responsivo para pantallas más grandes.
Método 1: crear un diseño adaptable a dispositivos móviles primero
Primero, comience por crear un enfoque de diseño centrado en los dispositivos móviles. Para ello, siga las instrucciones paso a paso que se proporcionan a continuación.
Paso 1: crear una estructura HTML
Primero, cree una estructura HTML y agregue un ' Oreja ' en el
< ul >
< eso >< a href = '#' > Hogar < / a >< / eso >
< eso >< a href = '#' > Sobre nosotros < / a >< / eso >
< eso >< a href = '#' > Nuestros servicios < / a >< / eso >
< eso >< a href = '#' > Contáctenos < / a >< / eso >
< / ul >
< / no>
< / encabezado>
< h1 > Bienvenido a la sugerencia de Linux < / h1 >
< pag > Un sitio web de tutoriales. < / pag >
< / sección>
< / principal>
< pag > Copyright de sugerencia de Linux < / pag >
< / pie de página>
< / cuerpo >
Paso 2: aplicar CSS
En la sección del cuerpo, establezca el ' Familia tipográfica ' a ' sans serif ”. También configure el relleno, el margen y el color de fondo. Después de eso, aplique CSS en el encabezado, pie de página y navegación:
cuerpo {Familia tipográfica : sans serif ;
margen : 0 ;
relleno : 0 ;
color de fondo : #808080 ;
}
encabezamiento {
color de fondo : púrpura ;
color : blanco ;
relleno : 8px ;
}
navegación ul {
tipo de estilo de lista : ninguno ;
relleno : 0 ;
margen : 0 ;
}
su barco {
margen : 4px 0 ;
}
nav ul li a {
color : blanco ;
decoracion-de-texto : ninguno ;
}
principal {
relleno : 18px ;
}
pie de página {
color de fondo : rosa ;
color : blanco ;
texto alineado : centro ;
relleno : 8px ;
}
Como se puede observar, el siguiente resultado ha confirmado que el diseño responde primero a dispositivos móviles:
Método 2: utilice consultas de medios para crear un diseño adaptable para pantallas más grandes
El diseño anterior también se puede crear para pantallas más grandes, como tabletas y computadoras de escritorio. Para ello, los usuarios deben incluir consultas de medios en el CSS. El ancho de las tabletas es “ 786px ' y para computadoras de escritorio es ' 1024px ”.
Para aplicar las consultas de medios, primero incluya el ' @medios de comunicación 'Etiqueta en el archivo CSS. Después de eso, especifique la propiedad 'ancho mínimo' como ' 768px ”. Esto significa que siempre que se cumpla el tamaño mínimo de pantalla “768px” o superior, se aplicará el siguiente CSS:
@medios de comunicación ( ancho mínimo : 768px ) {cuerpo {
tamaño de fuente : 14px ;
}
encabezamiento {
relleno : 18px ;
}
navegación ul {
mostrar : doblar ;
}
su barco {
margen : 0 8px ;
}
principal {
mostrar : doblar ;
justificar-contenido : espacio entre ;
alinear elementos : centro ;
}
pie de página {
relleno : 18px ;
}
}
El siguiente resultado demostró que el diseño también responde en pantallas más grandes:
Conclusión
Para configurar un diseño responsivo para dispositivos móviles, primero cree una estructura HTML y agregue la ventana gráfica. Después de eso, vincule el archivo CSS en la etiqueta principal. Luego, aplique CSS basado en un diseño responsivo para dispositivos móviles. Además, los usuarios pueden agregar la consulta de medios CSS para ajustarla en el dispositivo móvil. Este artículo ha demostrado un procedimiento detallado para configurar un diseño responsivo para dispositivos móviles.