Muy buenos días a todos y bienvenidos a la sexta entrega del curso de CSS, que tiene como objetivo aprender a modificar y tunear el CSS de nuestra web.
Para ver los vídeos podéis suscribiros a los cursos, y tendréis acceso no solo a este curso, sino también a todo el resto.
Hoy veremos cómo funcionan las webs responsive que se adaptan a dispositivos mobile y pantallas de varias dimensiones, gracias a las media queries de CSS.
6.1 - Teoría de las Media Queries
Empecemos con la teoría. Sólo nos tomará 5 minutos, pero tenemos que entender qué son las media queries y dónde y cómo debemos colocar el código.
Así pues, ya véis que la teoría es simple. Sólo tenemos que colocar todas las reglas de CSS dentro de esa condicional CSS para que sólo se aplique en esos casos.
6.2 - Práctica de las Media Queries
Ahora vamos a ver cómo funciona a la práctica. Veamos cómo modificando el código podemos alterar la responsividad de cualquier web. ¡Vamos a trastear con el código!
Como podéis ver, el funcionamiento es fácil y simple, y la flexibilidad ilimitada. Ahora que ya sabemos cambiar cualquier propiedad en función de la pantalla en la que se está mostrando, sólo tenemos que elegir si queremos un elemento a la derecha o debajo, si lo queremos ver o esconder, o si lo queremos más grande o más pequeño. Imaginación al poder. Usad el Inspector de Chrome como os he contado y experimentad con cualquier web.
Y a continuación os recomiendo que también echéis un vistazo a los enlaces que os he dejado debajo del vídeo y probéis esos códigos en cualquier site, o en el vuestro propio, y lo comprobéis en vuestros dispositivos. ¡Ya tenéis deberes! En la próxima clase... ¡Más! ;)
Todos los capítulos de este curso:
- Curso CSS #1. Introducción
- Curso CSS #2. Practica
- Curso CSS #3. Modificar el CSS de una web
- Curso CSS #4. Crear una landing page sólo con CSS
- Curso CSS #5. Modificar nuestro CSS correctamente
- Curso CSS #6. Media queries
- Curso CSS #7. Las 10 modificaciones de CSS que más me piden
- Curso CSS #8. Extensiones de CSS para Chrome
- Curso CSS #9. Modificar y guardar CSS visualmente
- Curso CSS #10. Herramientas online CSS