Consejo rápido Un curso intensivo en consultas de medios CSS

En el pasado, para crear diseños basados en el ancho del navegador del usuario, tuvimos que usar JavaScript, quizás combinado con un lenguaje del lado del servidor. Afortunadamente, el proceso ahora es mucho más sencillo gracias a las consultas de medios de CSS..

Suscríbete a nuestra página de YouTube para ver todos los videos tutoriales.!
Prefiero ver este video en Screenr?

Método 1: dentro de tu hoja de estilo

 Pantalla de @media y (min-width: 1200px) / * vamos a hacer algo * /

Método 2: importar desde tu hoja de estilo

 Pantalla de URL de importación (small.css) y (ancho mínimo: 1200 px);

Tenga en cuenta que también puede agregar reglas de adición aplicando una coma, como lo haría cuando usa varios selectores.

Método 3: Enlace a una hoja de estilo

Método 4: Apuntar al iPhone

Una nota interesante, después de un poco de investigación en la web, es que, a pesar del hecho de que el iPhone 4 tiene una resolución de 640x960, todavía lo hacemos. mobile.css, referenciado en el código anterior. ¿Que extraño? Si tiene más información al respecto, deje un comentario para el resto de nosotros.!

Navegadores que admiten consultas de medios CSS

Firefox 3.5+
Opera 9.5+
Safari 3+
Cromo
Internet Explorer 9+

Tenga en cuenta que Internet Explorer 8 y versiones anteriores no admiten consultas de medios CSS. En esos casos, debe utilizar un respaldo de JavaScript.

Código