¿Qué entender sobre los sitios web receptivos?

Los sitios web que pueden cambiar su apariencia de forma dinámica según el dispositivo o la pantalla en la que se visualice se denominan sitios web responsivos . Utiliza el concepto de puntos de interrupción para determinar la apariencia de los sitios web en diferentes pantallas. Los puntos de interrupción se especifican en función del ancho del navegador del dispositivo, lo que significa que la experiencia en todas las pantallas es diferente según sus anchos, lo que hace que se vea bien en todos los dispositivos, usando el mismo HTML. 

Los tamaños de navegador comunes de diferentes dispositivos son los siguientes:

• Móvil: 360×640
• iPhoneX: 375×812
• Píxel 2: 411 x 731
• Tableta: 768 x 1024
• Computadora portátil: 1366 x 768
• Escritorio HD: 1920 x 1080

Los sitios web receptivos también resuelven el problema de diseñar diferentes sitios web para diferentes dispositivos, ya que el contenido se puede ajustar en consecuencia, a diferencia de los sitios web normales.

Un gran ejemplo de un sitio web receptivo es el sitio web GeeksforGeeks:

• Vista de teléfono

• Vista de tableta

Como puede ver en ambas imágenes, todo el contenido se ajustó de acuerdo con el ancho del dispositivo y el texto, y el tamaño de la imagen aumentó con un aumento en el ancho y disminuyó con una disminución en el ancho.

¿Cómo hacer un sitio web responsivo?

Las siguientes son las formas de crear un sitio web receptivo:

1. El primer paso es incluir la siguiente metaetiqueta en la etiqueta principal de su código.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esto configurará la ventana gráfica, ajustará el contenido de acuerdo con el ancho de la pantalla del dispositivo y cargará la página en su nivel de zoom inicial en el navegador. 

Ejemplo: vistas con y sin metaetiqueta.

2. Hacer que el tamaño del texto sea receptivo: el tamaño del texto receptivo es el que cambia de acuerdo con el tamaño del navegador, es decir, se amplía cuando se aumenta el ancho y se reduce cuando se reduce el ancho. El texto se puede hacer receptivo usando la propiedad de ancho de la ventana gráfica, es decir , la unidad vw .

<h3 style="font-size:6vw; color:green">
    GeeksforGeeks
<h3><br>

<h4 style="font-size:4vw">
    The content on GeeksforGeeks has been 
    divided into various to make it easily 
    accessible for the users.
</h3>

Ejemplo: tamaño de texto receptivo y no receptivo:

El tamaño del texto receptivo aumentó con un aumento en el ancho del navegador como en la segunda imagen.

3. Hacer que la imagen responda: las imágenes que pueden cambiar sus dimensiones según el ancho del navegador son imágenes receptivas. Se puede hacer que una imagen responda aplicando la propiedad CSS de ancho y estableciéndola al 100% para que pueda escalarse hacia arriba o hacia abajo en consecuencia.

<img src="gfg_logo.jpg" style="width:100%;">

Ejemplo: imagen receptiva y no receptiva:

Al igual que en la segunda imagen, la imagen sensible cambia su escala según el ancho del dispositivo.

4. Las consultas de medios se pueden usar para hacer que el sitio web responda: las consultas de medios son parte de CSS3, además de hacer que el tamaño del texto y las imágenes respondan, también proporciona una amplia gama de propiedades, utilizando qué sitio web puede ser más atractivo. 

Podemos establecer diferentes propiedades para diferentes tamaños de pantalla. Por ejemplo, cuando el sitio web se ve en un teléfono, mostrará una rosa y cuando se ve en una tableta, mostrará la imagen de un lirio. O cambiar el color de fondo según el ancho del navegador. 

@media(max-width: 500px) {
    body {
        background-color:pink;
    }
}
@media(min-width: 501px) {
    body {
        background-color:black;
   }
}

Ejemplo:

El navegador del dispositivo que tiene un ancho menor o igual a 500 px tiene un fondo de color rosa y el dispositivo con un ancho de más de 500 px tiene un fondo de color negro. Todo esto se hace con consultas de medios simples, podemos agregar más puntos de ruptura al sitio web.

5. Flexbox para sitios web receptivos: Flexbox también es un módulo muy poderoso de CSS que ayuda a que el sitio web sea receptivo. Tiene propiedades únicas y efectivas que realizan incluso tareas complejas con mucha facilidad. También se puede utilizar para reducir o expandir los elementos de un contenedor, incluso si se desconoce el tamaño de los elementos.

Sintaxis:

.flex {
    justify-content: space-between;
}

Ejemplo: Las siguientes imágenes muestran los diversos efectos de diferentes propiedades en el sitio web. Hay muchas más propiedades de este tipo que hacen que el sitio web se vea bien y que la experiencia de los visitantes sea agradable.