Leí el artículo sobre ellos en css3.info, pero no tenía ganas de que lo explicara lo suficientemente bien. Tampoco pude cambiar sus ejemplos con el tamaño de mi pantalla. Intenté en Safari, FF, Chrome.¿Puede alguien explicar las consultas de medios de CSS?
¿Es esta una característica que aún no está lista para la implementación?
Si quiero ajustar algunos estilos cuando la ventana del navegador tiene menos de 1024 px de ancho. ¿Cómo puedo hacer eso?
La regla aplicada al tamaño de la pantalla significa que, citando spec W3C "es utilizable en la pantalla y dispositivos de mano si la anchura de la ventana gráfica es" en las restricciones especificadas.
http://www.w3.org/TR/css3-mediaqueries/
Si desea ajustar el estilo, cuando la ventana está a menos de 1024px de que pueda utilizar esta regla:
@media screen and (max-width: 1024px) { … }
todos modos esta regla sólo se aplica al tamaño real de la vista. Si cambia el tamaño de la ventana gráfica sin volver a cargar la página, los estilos no se aplicarán.
Para aplicar una hoja de estilo a un documento cuando se muestra en una pantalla mayor de 800 píxeles de ancho:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" >
Para aplicar una hoja de estilo a un documento cuando se muestran en cualquier dispositivo de menos de 400 píxeles de ancho:
<link rel="stylesheet" media="all and (max-device-width: 400px)" >
dentro
@media all and (max-width:800px) {
body { color: red; }
}
para el iphone
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Para ver cómo las diferentes preguntas de los medios reaccionan el cambio de tamaño o el cambio de orientación, probar la demo en esta página:
http://www.jensbits.com/2011/04/20/media-query-playground-rotate-resize-rinse-repeat/
Puede ajustar los atributos de consulta de medios para tener una idea de cómo afectan a una página .
Éstos son algunos proyectos que resuelven este problema y están a la vanguardia de css y dinámica de la pantalla tamaños:
'320 y Up' impide que los dispositivos móviles de descargar recursos de escritorio por usando una hoja de estilo de pantalla pequeña como su punto de partida.
Menos Marco es un sistema de rejilla CSS para el diseño de sitios web adaptativos.Es contiene 4 diseños y 3 conjuntos de presets de tipografía , todos basados en una única cuadrícula .
esto funciona, en realidad, en el cromo está actualizando los estilos como puedo cambiar el tamaño del puerto de vista sin tener que recargar! :) –
En realidad funciona en todos los navegadores, aparte de IE – Burjua