El término diseño web receptivo corresponde a la estrategia de hacer que un sitio web se comporte dependiendo del dispositivo en el que se está mostrando en el que se está mostrando. Por ejemplo, puede hacer que un sitio web altere su comportamiento de acuerdo con el ancho de la pantalla, la resolución, la orientación, etc. Un diseño web receptivo hace que un sitio web sea dinámico en la naturaleza.

Si responde a su sitio web, entonces no hay necesidad de desarrollar el mismo sitio web una y otra vez para cada nuevo dispositivo que surge en el mercado. El sitio web cambiaría automáticamente su comportamiento en función del deseo del usuario. Esta capacidad de respuesta hará que el sitio web cambie su apariencia cuando el usuario cambie de usar el sitio web en un escritorio a un teléfono móvil.

Ahora sabemos qué es un sitio web receptivo, la próxima gran pregunta es cómo generar uno. Considere la siguiente sección para explorar la respuesta a esta pregunta.

Cómo hacer que su diseño web responda

Hacer un sitio web que responda implica hacer que sus elementos, como texto, imágenes, etc., flexible utilizando ciertos diseños. A continuación le hemos mostrado varias entidades que hacen que su página web responda.

1. Visión

Lo primero y lo más importante que debe incluir en su archivo de código fuente para hacer que su página web responda es agregar una meta etiqueta receptiva.

En esta etiqueta, el ancho se establece en ancho del dispositivo, lo que significa que el ancho de la página web cambiará en correspondencia al ancho del dispositivo, mientras que la escala inicial se establece en 1, lo que significa cuando el navegador cargue la página web por el navegador Por primera vez, el nivel de zoom será 1. Esta etiqueta básicamente ordena al navegador que ajuste las mediciones de una página web de acuerdo con varias situaciones.

2. Preguntas de los medios

Las consultas de medios CSS le permiten cambiar la apariencia de la estructura web dependiendo del tipo de dispositivo que muestra el sitio web, como computadoras de escritorio, teléfonos, computadoras portátiles, etc., y resultar útil para diseñar sitios web receptivos. Además, estos se pueden usar para evaluar cosas como la altura y el ancho del dispositivo y la ventana gráfica, la orientación del dispositivo o la resolución de la pantalla.

Estas consultas hacen uso de ciertos puntos de interrupción que se denominan puntos en los que el diseño de un sitio web altera el tamaño de la pantalla del tipo de dispositivo.

Sintaxis

@Media no | Solo tipo de medios y (función de medios y | o | no función de medios)

//Código;

Palabras clave explicadas

• no: Reversa a la semántica de una consulta de medios.
• solo: Evita que las versiones antiguas de un navegador implementen la consulta de medios.
• y: Combina un tipo de medios con una determinada función de medios.

Ahora exploremos un ejemplo de cómo responde su página web utilizando consultas de medios.

Ejemplo
A continuación estamos demostrando una consulta de medios.

Html

Hola Mundo!

Aquí hemos definido un

elemento y colocado un texto dentro de él.

CSS

H1
Font-Family: 'Times New Roman', Times, serif;

@Media Screen y (Min-Width: 720px)
H1
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;

En el código anterior, la familia de fuente inicial del párrafo se establece en Times New Roman, mientras que, después de aplicar la consulta de medios, donde hemos especificado que si el ancho de pantalla mínimo es de 720 px o más ancha, entonces la familia de la fuente del párrafo Cambio a Verdana. Damine el tamaño de la ventana de su navegador para ver el efecto de la consulta de medios.

Producción
Cuando el ancho de pantalla menor es 720px o más amplio.

Cuando el ancho de pantalla mínimo es inferior a 720px.

La consulta de medios funciona correctamente.

3. Flexbox

CSS Flexbox es un modelo de diseño que permite una disposición eficiente y dinámica de elementos. Este diseño es unidimensional que permite la colocación de elementos dentro de un contenedor con espacio igualmente distribuido. Este diseño hace que los elementos respondan, lo que significa que los elementos cambian su comportamiento de acuerdo con el tipo de dispositivo que los muestra. Hace que los elementos sean flexibles y les proporcione una posición adecuada y simetría.

Un Flexbox consiste en los siguientes componentes que son; a contenedor flexible y un artículo flexible. Un contenedor flexible define las propiedades del elemento ancestro al establecer su pantalla en flexión o en línea-flexión. Mientras tanto, un elemento flexible describe las propiedades de los elementos sucesores y puede haber numerosos elementos presentes dentro de un contenedor flexible.

Además, hay una serie de propiedades asociadas con un Flexbox que ayudan a hacer que un diseño web responda. Aquí vamos a mostrarle cómo puede usar un FlexBox para que su sitio web responda.

Ejemplo
En el siguiente ejemplo, hemos demostrado cómo generar una cuadrícula de imagen receptiva usando FlexBox.

Html

Para hacer una cuadrícula de imagen, estamos haciendo un elemento div más grande y anidamos dos elementos divs dentro de ese div más. Ambos elementos Div anidados anidan además tres imágenes cada una.

CSS

.envase
Pantalla: Flex;
Flex-Wrap: envoltura;
relleno: 5px;

El DIV con la clase de "contenedor" se muestra como una caja flexible, y se le ha dado cierto relleno. Además, la propiedad Flex-Wrap se asigna el valor de envoltura, lo que significa que si es necesario, las imágenes se envolverán dentro del contenedor.

CSS

.columnas img
Ancho: 100%;

.columnas
flexión: 50%;
anchura máxima: 50%;
relleno: 5px;

Las imágenes han recibido un ancho del 100% para que se ajusten adecuadamente en el contenedor, además, utilizando el ancho Flex y el máximo, estamos creando dos columnas que se colocarán una al lado de la otra.

CSS

@Media (max-width: 600px)
.columnas
Flex: 100%;
Máxido: 100%;

Junto con el FlexBox también estamos utilizando la consulta de medios. La consulta de medios anterior especifica que si el ancho es menor que el especificado, la dos columnas se convertirá en uno.

Producción
Escala la ventana de su navegador hacia arriba y hacia abajo para ver el efecto.

Se creó una cuadrícula de imagen receptiva.

4. Oreja

Es un marco CSS que permite a sus usuarios crear sitios web que responden en la naturaleza y con un enfoque móvil primero. Este enfoque especifica que el diseño web se desarrolla por primera vez para teléfonos móviles y más tarde para otros dispositivos. Aquí vamos a demostrar cómo hacer una barra de navegación que responda en la naturaleza usando bootstrap.

Ejemplo
Estamos utilizando la última versión de Bootstrap, que es Bootstrap 5 para hacer una barra de navegación.

Html

En primer lugar, para utilizar Bootstrap 5, incluye CDN para CSS y JavaScript en su archivo HTML como lo hemos mostrado arriba.

Html

En el código anterior, hemos hecho una barra de navegación utilizando varias clases de Bootstrap 5. El .barra de navegación La clase se usa para envolver una barra de navegación junto con .Navbar-Expand-SM Clase para colapsar receptivo. Mientras tanto el .bisco y .Navbar-oscuridad son los diferentes esquemas de color proporcionados a la barra de navegación.

El .envase clase envuelve todos los elementos de una barra de navegación con un ancho fijo. Mientras tanto, el .navegador de navicar Se utiliza la clase Crear una barra de navegación que tenga una altura máxima y es liviana y también admite desplegables.

El .ítem de navegación, y .enlace de navegación se utilizan para crear varios elementos de lista en la barra de navegación y el .activo La clase hace un enlace activo.

Producción

Se generó con éxito una barra de navegación receptiva.

Conclusión

El diseño web receptivo corresponde a la estrategia de hacer que un sitio web altere su comportamiento dependiendo del dispositivo en el que se está mostrando. Si responde su sitio web, entonces no es necesario desarrollar el mismo sitio web una y otra vez para cada nuevo dispositivo que surge en el mercado. Tal sitio web se puede desarrollar utilizando varias entidades, como incluir una metaetiqueta receptiva en su archivo, utilizando consultas de medios, FlexBox o Bootstrap. Aquí en este artículo, le hemos demostrado varias técnicas con las que puede hacer que su sitio web recompense.