CSS: Diseño responsivo

(música ligera) Bienvenido de nuevo al curso de Ciudad del Conocimiento en hojas de estilo en cascada. Soy Cliff Brozo, soy tu profesor. Y en la lección de hoy vamos a hablar de Responsive Design, cómo van a cambiar las cosas a medida que cambie la ventana gráfica. Aprenderemos sobre las diferentes ventanas gráficas. Descubriremos qué queremos decir con vista de cuadrícula y cómo lo ponemos a trabajar. Exploraremos las consultas de medios y veremos los contenedores. y cómo usarlos. Echemos un vistazo a la ventana gráfica. Es el área visible de los usuarios. Dependiendo del dispositivo que esté mirando el usuario, podría ser un teléfono, podría ser una tableta, podría ser una computadora de escritorio, podría ser una computadora portátil. Y lo que hacemos es codificar nuestro HTML prestar atención a qué dispositivo está utilizando el usuario. Y luego podemos diseñar nuestro código para que se ajuste perfectamente a ese dispositivo. Una vista de cuadrícula receptiva nos permite juntar filas y columnas y divida la página en pedazos. Y luego podemos identificar cada una de esas piezas y diseñarlos de manera diferente. Las consultas de medios nos permiten echar un vistazo a esa ventana gráfica. y pruebe el dispositivo del usuario para ver cuál o ella está usando. Luego podemos establecer nuestro ancho y alto para maximizar nuestras páginas en su dispositivo. Escala de imágenes receptivas, y hay diferentes formas de escalar la imagen para adaptarse al dispositivo. Ciertamente nos gusta mantener nuestra relación de aspecto para que la imagen no se distorsione, lo que significa que rara vez queremos estirar una imagen para ajustarse a un área de contenido de tamaño incorrecto. Las imágenes receptivas tienen tres posibilidades. Pueden estar contenidos en un área determinada como puede ver, el Puente de Londres está perfectamente contenido en esta caja cuadrada. Si le pedimos al navegador que se ajuste al London Bridge utilizando 100% del tamaño de la imagen, perdemos parte de la imagen. El resto no encaja y, como puede ver, se distorsiona. Y finalmente, si le preguntamos al navegador para cubrir toda el área, bueno, esa no es solo la caja simple si te ves muy, muy de cerca en la esquina inferior derecha, ahí está la cima del Puente de Londres porque esa es esta parte de la imagen. Las consultas de medios nos permiten poner diferentes imágenes en diferentes pantallas. Entonces, dependiendo del dispositivo del usuario, el usuario verá una imagen muy diferente de esencialmente lo mismo. Los contenedores nos permiten crear cajas tipo Excel y luego coloque las cosas en esas cajas. Podemos tener filas y columnas normales que pueden o puede que no sea del mismo tamaño, o podemos ponernos elegantes y crear una agrupación diferente de filas y columnas con superposiciones y áreas que no son del mismo tamaño. Así que veamos cómo funciona todo esto.