Hoy en día, los dispositivos vienen en todas las formas y tamaños. Los usuarios acceden a sitios web con diferentes tamaños de pantalla, desde grandes monitores de escritorio hasta teléfonos inteligentes compactos. Dada esta diversidad, ¿cómo puede un sitio web mostrarse consistentemente en pantallas de diferentes tamaños?
La respuesta es la vista y la forma en que la usa para crear sitios web con un diseño receptivo. En este artículo, discutiremos cómo funciona una ventana gráfica. A continuación, exploraremos cómo se puede acceder y utilizar el área visible en CSS para garantizar una experiencia consistente y receptiva para cada visitante del sitio.
¿Qué es una ventana gráfica?
El área visible es el área del sitio web visible para el usuario. El área visible es fundamental para el desarrollo web ya que sus dimensiones controlan la apariencia de los elementos de la página.
El área visible es un rectángulo, cuyo tamaño depende del tamaño del dispositivo del usuario. En una computadora de escritorio, el tamaño del área visible corresponde al tamaño de la ventana del navegador, con la excepción de la barra de herramientas y otros elementos que no forman parte de la página. En un dispositivo móvil, el área visible suele ser del tamaño de la pantalla del dispositivo.
Hay dos tipos de ventanas gráficas: una ventana gráfica de diseño y una ventana gráfica visual.
- La ventana gráfica de diseño hace referencia a las dimensiones de la página que utiliza el navegador para determinar cómo se muestra la página.
- El espacio de trabajo visual es potencialmente más pequeño, lo que se explica por el hecho de que algunas características del navegador, como los teclados en pantalla y los eventos de zoom con el dedo, limitan la visibilidad de la página pero no cambian el diseño de la página. El área visible visual es más apropiada en los dispositivos móviles donde estos eventos del navegador ocurren con mayor frecuencia.
Es importante destacar que ambas ventanas de trabajo se pueden cambiar, lo que significa que sus dimensiones pueden cambiar después de cargar la página.
Por ejemplo, en una computadora, un usuario puede cambiar el tamaño de la ventana del navegador, lo que hace que el diseño de la página cambie para adaptarse a las nuevas dimensiones. En un dispositivo móvil, el usuario puede cambiar la vista de diseño girando su dispositivo. Además, el área de trabajo visual puede cambiar si aparece el teclado en pantalla, reduciendo la vista de la página más allá del área del teclado.
El enfoque principal de los desarrolladores web es la vista de diseño. Dado que los estilos CSS dependen de las dimensiones de la ventana gráfica de diseño, la ventana gráfica de diseño determina en última instancia cómo se muestra la página al usuario. En este artículo, analizaremos principalmente la ventana gráfica de diseño, pero tenga en cuenta que los desarrolladores pueden acceder a la vista visual a través de API de JavaScript visual.
Como la ventana de diseño puede cambiar en cualquier momento, el sitio web debe poder adaptarse rápidamente a estos cambios para garantizar que el contenido siempre parezca relevante para el usuario. Por ejemplo, un diseño de sitio web deficiente sería deficiente si girar la pantalla dificultara o impidiera ver o interactuar con el usuario.
A continuación, analicemos cómo se pueden usar la vista y CSS para lograr un diseño de sitio web funcional y fácil de usar.
Ventanas de visualización CSS receptivas
El diseño receptivo ayuda a tener en cuenta la imprevisibilidad del tamaño de la pantalla del usuario. Es un pilar moderno del diseño web que se enfoca en crear una experiencia de usuario consistente en todos los dispositivos.
En el pasado, el diseño de sitios web solo estaba bien para los usuarios de escritorio. Hoy, sin embargo, cada sitio web debería adaptarse orgánicamente al tamaño de la pantalla del usuario. Los usuarios esperan que cuando se abre una página en su pequeño dispositivo móvil, el contenido tenga el tamaño correcto, todo el texto sea legible y la navegación por la página sea fácil.
Acceder al tamaño del área visible en el estilo de la página es fundamental para implementar este tipo de diseño receptivo, y el principal método que puede utilizar para lograrlo son las consultas de los medios. En particular, utilizará @medios de comunicación regla CSS. Cualquier estilo para adaptarse @medios de comunicación la regla solo se aplica a las pantallas que se ajustan a las dimensiones especificadas.
Considere el siguiente ejemplo. Suponga que desea aumentar el tamaño de fuente de los párrafos de su sitio cuando aparecen en dispositivos más pequeños. Una forma de hacerlo es agregar el siguiente código CSS a su página:
Vamos a descifrar este código. Primero, inicialmente declara que el tamaño de fuente del texto dentro de los párrafos es de 12 píxeles. debajo de eso @medios de comunicación la regla aplica el estilo de forma selectiva en función del ancho de la ventana gráfica del usuario.
Primera parte @medios de comunicación una regla es un tipo de medio que le dice al navegador a qué tipo de páginas aplicar un estilo especial. En este ejemplo, usted elige pantalla para cada pantalla de dispositivo normal. Otras opciones incluyen impresiónque es utilizado por las impresoras, y discursoque es utilizado por los lectores de pantalla.
En la segunda parte de la regla (ancho máximo: 500px), declara que el estilo solo debe aplicarse a una pantalla con un ancho máximo de 500 píxeles, que es un valor relativamente pequeño. Sin embargo, si desea enfocar este estilo en accesorios aún más pequeños, siéntase libre de reducirlo. ancho máximo valor.
Finalmente, pones tu estilo alternativo en el cuerpo. @medios de comunicación regla. En este caso, declara que el texto en las marcas de párrafo debe ser una fuente de 14 píxeles. Si se aplica a una ventana de usuario, esta regla anula el valor declarado anteriormente debido a la naturaleza en cascada de CSS.
Este ejemplo es relativamente simple, pero hay formas aún más simples de escalar dinámicamente el tamaño de fuente en CSS, como usar un Movimiento rápido del ojo una unidad dinámica en lugar de una unidad absoluta como píxeles. En la práctica, sin embargo, puede utilizar @medios de comunicación reglas para hacer grandes cambios en el estilo de la página para un diseño receptivo.
Veamos otro ejemplo: un dispositivo móvil tiene una pantalla estrecha, por lo que puedes usarlo @medios de comunicación reglas para ajustar el estilo de la página para hacer un mejor uso del espacio disponible en el dispositivo verticalmente, no horizontalmente.
Suponga que tiene un grupo de pestañas en su sitio con información similar a esta:
Las tarjetas se ven bien en una pantalla ancha de computadora, pero no hay suficiente espacio en el dispositivo móvil para mostrar las tres tarjetas seguidas. Para solucionar esto, puede hacer que las cartas se apilen en una columna en pantallas más pequeñas.
Suponga que tiene las siguientes etiquetas HTML para tres pestañas:
los titular de la tarjeta es un flexbox con el siguiente estilo para centrar las cartas en él:
Para organizar elementos en una columna en pantallas pequeñas, puede agregar uno @medios de comunicación Regla de cambio de CSS titular de la tarjeta:
Línea única aquí dirección de desviación: columna actualiza CSS de la forma que desee para las pantallas de ancho máximo 350 píxeles Después de este cambio, las pestañas en la pantalla pequeña ahora se ven así:
Por @medios de comunicación las reglas permiten la orientación al área de visualización del usuario, ya que garantizan un estilo dinámico y receptivo de la página.
Una nota sobre @viewport
Es posible que conozca otra regla CSS, @vistaque muchos desarrolladores utilizaron para ajustar las dimensiones del espacio de trabajo inicial del usuario. Sin embargo, esta característica ahora está obsoleta.
Este Dia, @vista solo está disponible en el antiguo navegador Internet Explorer para el que Microsoft suspendió oficialmente el soporte en junio de 2022. Así que evite @vista regla completamente en cualquier código CSS futuro.
Utilice ventanas gráficas para que sus páginas respondan.
El área visible es un concepto importante del navegador que determina qué partes de la página son visibles y cómo organizar el contenido. Especializar el estilo de la página según el área visible es una técnica importante para lograr un diseño responsivo.
En las últimas décadas, la llegada de los teléfonos inteligentes como la principal forma en que las personas acceden a Internet ha obligado a los diseñadores web a adaptarse. Los usuarios esperan una experiencia consistente independientemente del tamaño del dispositivo.
Por lo tanto, al crear sus páginas web, preste mucha atención al área visible para asegurarse de que su sitio web cumpla con estas expectativas en todos los dispositivos.
