El primer paso para comenzar es reconocer tres partes fundamentales de nuestro entorno de visualización:
- Viewport (ventana gráfica): la ventana gráfica es el área visible para el usuario de una página web. Varía según el dispositivo: será más pequeño en un teléfono móvil que en la pantalla de una computadora.
- Navigator (navegador): corresponde al navegador y su barra de herramientas.
- Screen (pantalla): visualización de la pantalla es el área visible para el usuario donde observa los iconos de los programas.
Con esto podemos conocer la disposición de las áreas que tenemos para brindar diseño web responsivo a los elementos.
El segundo paso es agregar la etiqueta fundamental meta en el HTML para configurar la ventana gráfica del sitio web para que este se observe bien en todos los dispositivos:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto le da al navegador instrucciones sobre cómo controlar las dimensiones y la escala de la página.
La parte width=device-width del dispositivo establece el ancho de la página para que siga el ancho de la pantalla del dispositivo (que variará según el dispositivo).
La parte initial-scale=1.0 establece el nivel de ZOOM inicial cuando el navegador carga la página por primera vez. Agregar el valor initial-scale=1 indica a los navegadores que establezcan una relación 1:1 entre los píxeles del CSS y los píxeles independientes del dispositivo, independientemente de la orientación del dispositivo, y permite que la página aproveche todo el ancho.
Seguidamente el tercer paso es conocer las herramientas de desarrollador y el uso de los media queries que nos permiten constituir una serie de reglas CSS que sólo se ejecutarán cuando se cumplan unas condiciones que se hayan establecido previamente.