}Mover el contenido de pantallas más anchas a más estrechas.Media QueriesCSS3 soporta todos los mismos tipos de medios que CSS 2.1, como pantalla, impresión y mano, pero ha añadido docenas de nuevas características de medios, incluyendo max-anchura, dispositivo-anchura, orientación y color. Los nuevos dispositivos fabricados después del lanzamiento de CSS3 (como el iPad y los dispositivos Android) soportarán definitivamente las características de medios. Por lo tanto, llamar a una consulta de medios utilizando las características de CSS3 para dirigirse a estos dispositivos funcionaría perfectamente, y será ignorada si se accede a ella desde un navegador de ordenador antiguo que no soporta CSS3.En el artículo de Ethan Marcotte, vemos un ejemplo de una consulta de medios en acción:<link rel=”stylesheet” type=”text/css”
}El código anterior procede de una plantilla gratuita de consultas de medios múltiples entre dispositivos populares de Andy Clark. Vea las diferencias entre este enfoque y la inclusión de diferentes archivos de hojas de estilo en el marcado, como se describe en su libro “Hardboiled Web Design”.Consultas de medios CSS3Lo anterior son algunos ejemplos de cómo podrían funcionar las consultas de medios, tanto de CSS 2.1 como de CSS3. Veamos ahora cómo utilizar las consultas de medios de CSS3 para crear diseños web responsivos. Muchos de estos usos son relevantes hoy en día, y todos serán definitivamente utilizables en un futuro próximo.Las propiedades min-width y max-width hacen exactamente lo que sugieren. La propiedad min-width establece una anchura mínima del navegador o de la pantalla a la que se aplicará un determinado conjunto de estilos (o una hoja de estilo independiente). Si algo está por debajo de este límite, el enlace de la hoja de estilo o los estilos serán ignorados. La propiedad max-width hace justo lo contrario. Todo lo que esté por encima del ancho máximo del navegador o de la pantalla especificado no se aplicará a la respectiva consulta de medios.Tenga en cuenta en los ejemplos siguientes que estamos utilizando la sintaxis para las consultas de medios que podrían utilizarse todas en una hoja de estilo. Como se mencionó anteriormente, la forma más eficiente de utilizar las consultas de medios es colocarlas todas en una hoja de estilos CSS, con el resto de los estilos para el sitio web. De esta manera, no hay que hacer múltiples peticiones para múltiples hojas de estilo.@media screen and (min-width: 600px) {
¡Lleva tu diseño de tu imaginación a tu navegador! En este curso, Javier Usobiaga te enseña a crear páginas web utilizando sólo las herramientas básicas: HTML y CSS. Aprende a escribir tu propio código y a cambiar tu forma de ver y diseñar la web entendiendo su funcionamiento interno y cómo lograr sitios web responsivos más efectivos. Si el diseño no es lo tuyo, este curso también puede darte una base sólida para iniciarte en el mundo del desarrollo web front-end.
Este curso aborda el HTML y el CSS desde cero. Javier te enseña las etiquetas básicas de HTML y las propiedades tipográficas de CSS, las herramientas de maquetación como Floats y Position, los fondos, los bordes, las esquinas redondeadas, las sombras, las fuentes web, y las herramientas web responsivas fundamentales como Media Queries.
Todos los cursos son 100% online, así que una vez publicados, los cursos empiezan y terminan cuando tú quieras. Tú marcas el ritmo de la clase. Puedes volver a repasar lo que más te interese y saltarte lo que ya sepas, hacer preguntas, responderlas, compartir tus proyectos y mucho más.
En los primeros tiempos del diseño web, las páginas se construían para un tamaño de pantalla concreto. Si el usuario tenía una pantalla más grande o más pequeña de lo que el diseñador esperaba, los resultados iban desde barras de desplazamiento no deseadas hasta longitudes de línea demasiado largas y un mal uso del espacio. A medida que se fueron ampliando los tamaños de pantalla, apareció el concepto de diseño web responsivo (RWD), un conjunto de prácticas que permite que las páginas web modifiquen su diseño y apariencia para adaptarse a diferentes anchos de pantalla, resoluciones, etc. Es una idea que cambió la forma de diseñar para una web multidispositivo, y en este artículo te ayudaremos a entender las principales técnicas que debes conocer para dominarla.
Diseños de sitios web históricosEl HTML es fundamentalmente responsivo. Si creas una página web que contenga texto y cambias el tamaño de la ventana del navegador, o muestras la página en un dispositivo con una pantalla más pequeña, el navegador redistribuirá automáticamente el texto para ajustarlo a la ventana.
El problema con este enfoque es que obtendrá una barra de desplazamiento horizontal en pantallas más pequeñas que el ancho del sitio (como se ve a continuación), y mucho espacio en blanco en los bordes del diseño en pantallas más grandes.
Hoy en día, un sitio web no debe verse bien sólo en una pantalla de escritorio, sino también en tabletas y smartphones. Un sitio web es responsive si es capaz de adaptarse a la pantalla del cliente. En este artículo, te mostraré cómo hacer fácilmente un sitio web responsive en tres sencillos pasos.1 – El diseñoCuando se construye un sitio web responsive, o se hace responsive un sitio existente, el primer elemento que hay que mirar es el diseño. Cuando construyo sitios web responsivos, siempre empiezo por crear un diseño no responsivo, fijado en el tamaño por defecto. Por ejemplo, el ancho por defecto de CatsWhoCode.com es de 1100px. Cuando estoy satisfecho con la versión no responsive, añado media queries y ligeros cambios en mi código para hacer el código responsive. Es mucho más fácil centrarse en una tarea a la vez. Cuando hayas terminado con tu sitio web no responsivo, lo primero que debes hacer es pegar las siguientes líneas dentro de las etiquetas <head> y </head> de tu página html. Esto establecerá la vista en todas las pantallas en una relación de aspecto de 1×1 y eliminará la funcionalidad por defecto de los iPhones y otros navegadores de teléfonos inteligentes, que representan los sitios web en vista completa y permiten a los usuarios hacer zoom en el diseño pellizcando.<meta name=”viewport” content=”width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no”>.