Este artículo muestra los pasos para crear un diseño de sitio web receptivo en HTML y CSS usando:
- Metaetiqueta de ventana gráfica
- Imágenes receptivas
- Diseño de caja flexible
- Diseño de cuadrícula
- Preguntas de los medios
¿Cómo crear un diseño de sitio web receptivo con HTML y CSS?
Crear un diseño de sitio web receptivo con HTML y CSS implica crear un diseño que se adapte a diferentes tamaños y resoluciones de pantalla. Estos son los pasos que puede seguir para crear un diseño de sitio web receptivo:
Paso 1: metaetiqueta de ventana gráfica
El ' mirador La metaetiqueta juega un papel vital en la creación de un diseño web receptivo. Se inserta dentro del “
< meta nombre = 'ventana de visualización' contenido = 'ancho = ancho del dispositivo, escala inicial = 1' / >
La metaetiqueta anterior tiene dos atributos:
- El ' nombre El atributo ” indica el nombre de la funcionalidad para la que se crea/utiliza esta etiqueta. Por ejemplo, establecer el “ mirador ' hacia ' nombre ” atributo para tratar con la ventana gráfica de diferentes dispositivos.
- El ' contenido El atributo ” define el valor del atributo anterior. Establece el ancho de cada dispositivo y escala el documento/página web al 100%.
Paso 2: imágenes receptivas
Como el tamaño de la imagen varía entre sí, por lo tanto, es difícil establecer el mismo ' altura ' o ' ancho ” propiedad para cada imagen. Cuando el tamaño de la imagen es fijo, los usuarios no cambian el tamaño de la imagen de la página web con la pantalla. Sin embargo, los usuarios pueden configurar la imagen receptiva a través del siguiente código:
imagen {
max- ancho : 100 %;
}
El ' anchura máxima La propiedad CSS impide que la imagen se muestre dentro de su espacio asignado. Al establecer el valor en '%', la imagen cambia de tamaño junto con el cambio de tamaño de su elemento principal. Esto crea un efecto de respuesta para la imagen.
Paso 3: diseño de Flexbox
El diseño de Flexbox es muy recomendable para crear un diseño de sitio web receptivo. Permite que los elementos HTML se muestren en una determinada posición y cambien el tamaño del espacio disponible para cada hijo de acuerdo con el tamaño disponible por el div padre. El diseño de Flexbox contiene varias propiedades que brindan mucha libertad al desarrollador, como en el siguiente código:
< estilo >
.padre {
pantalla: flexible;
}
.niño {
doblar: 1 ;
texto- alinear : centro;
}
< / estilo >
< cuerpo >
< división clase = 'padre' >
< división clase = 'niño' estilo = 'borde: 3px azul violeta sólido;' >Bienvenido< / división >
< división clase = 'niño' estilo = 'borde: 3px verde oscuro sólido;' >a< / división >
< división clase = 'niño' estilo = 'borde: 3px rojo sólido;' >Linuxint< / división >
< / división >
< / cuerpo >
En el fragmento de código anterior:
- Primero, cree un elemento div principal con una identificación de ' padre ' dentro de '
' etiqueta. - A continuación, cree varios elementos div secundarios y asígneles una clase de ' niño ”.
- Luego, seleccione el “ padre ” clase y proporcione el valor de “ doblar ” para el CSS “ mostrar ' propiedad.
- Después de eso, proporcione un valor de “ 1 ' hacia ' doblar “propiedad de cada uno” niño ” class que hace que el elemento secundario se muestre como un flex.
Después de ejecutar el código anterior, la página web se ve así:
El resultado anterior muestra que el elemento secundario obtiene el mismo ancho cuando se cambia el tamaño del navegador.
Paso 4: diseño de cuadrícula
El diseño de cuadrícula crea una cuadrícula y asigna los elementos HTML dentro de la parte de la cuadrícula. Los elementos de la cuadrícula cambian en relación con el tamaño de la pantalla de la página web. Crea un diseño receptivo a medida que el tamaño del elemento HTML cambia según la pantalla del dispositivo:
< estilo >.envase {
pantalla: cuadrícula;
cuadrícula-plantilla-columnas: 1fr 1fr 1fr;
}
< / estilo >
< cuerpo >
< división clase = 'componente' >
< división estilo = 'borde: 3px verde bosque sólido;' >Linuxint< / división >
< división estilo = 'borde: 3px verde oscuro sólido;' >Linuxint< / división >
< división estilo = 'borde: 3px rojo sólido;' >Linuxint< / división >
< / división >
< / cuerpo >
En el código anterior:
- Primero, cree un div principal y asígnele una clase de ' componente ' dentro de '
' etiqueta. Después de eso, cree tres elementos div secundarios en él. - Luego, en el archivo CSS asigne un “ red ” valor a la “ mostrar ” propiedad para el “ envase ” div.
- Después de eso, cree tres porciones del mismo tamaño en la página web usando el botón ' cuadrícula-plantilla-columna ” propiedad y configúrelo igual a “ 1 fr 1 fr 1 fr ” donde fr significa “ fracción ”.
Después de compilar el código anterior, el resultado se ve así:
El resultado muestra que los divs se redimensionan según el tamaño de la pantalla con proporciones iguales.
Paso 5: consultas de medios
El uso de consultas de medios para hacer un diseño receptivo es algo de la vieja escuela, pero aún así, la mayoría de los sitios web usan consultas de medios. Las consultas de medios se pueden agregar directamente en el archivo CSS después de agregar el estilo predeterminado para el elemento HTML seleccionado. La consulta de medios hace que el código sea un poco más largo y desordenado. Porque el desarrollador necesita insertar código para cada tamaño de pantalla por separado.
Por ejemplo, vea el siguiente fragmento de código:
@ medios de comunicación pantalla y ( min- ancho : 640px ) {.componente {
fondo- color : bosque verde;
}
}
En el fragmento de código anterior:
- Primero, configure la consulta de medios que aplica las propiedades CSS a la clase de elemento seleccionada ' componente ” cuando el ancho del tamaño de la pantalla es mayor que “ 640px ”.
- A continuación, seleccione la 'clase de componente y establezca el valor de' bosque verde ' Para el ' color de fondo ' propiedad.
.componente {
fondo- color : dodgerblue;
}
}
Luego, para el fragmento de código anterior:
- Configure la consulta de medios para aplicar estilos cuando el tamaño del ancho sea menor que ' 1000px ”.
- Ahora, seleccione el “ componente ” clase y proporcione un valor de “ dodgerblue ' Para el ' color de fondo ' propiedad:
Después de ejecutar los fragmentos de código anteriores, el resultado se ve así:
El resultado muestra que la consulta de medios está cambiando el fondo según el tamaño de la pantalla. El tamaño de fuente, el ancho, la altura y otras propiedades de CSS también se pueden aplicar siguiendo el mismo patrón.
Los posibles tamaños de pantalla de puntos de interrupción que se deben considerar al usar las consultas de medios son:
- Para ' pequeño ” tamaño de pantalla, configure el ancho más pequeño que “ 640px ”.
- Para ' medio ” tamaño de la pantalla de visualización, el ancho oscila entre “ 641px ' y ' 1007px ”.
- Para ' grande ” tamaño de pantalla, establezca el ancho en “ 1008px ' o mayor.
Conclusión
Para crear un diseño de sitio web receptivo, los desarrolladores deben agregar el ' ventana gráfica ” etiqueta en el “