me gustaría utilizar una instrucción condicional para fijar una hoja de estilo diferente para:declaración condicional para la resolución de pantalla?
if the clients resolution is <= 1024*768
Estoy bastante seguro de que esto es posible, pero nunca he visto el código para ello antes?
ps. No estoy buscando una solución de javascript
CSS 3 introduce media queries, pero es nuevo y el soporte no es tan extendido todavía (Firefox solo lo introdujo en la versión 3.5, por ejemplo, e Internet Explorer no lo obtendrá hasta versión 9) así que construya con la mejora progresiva en mente. CSS Tricks tiene un tutorial para proporcionar different CSS for different browser window sizes (que es una métrica más útil que la resolución de pantalla).
Puede probar support for your browser.
Hay esta opción, totalmente lado del cliente y Javascript impulsado, añadir una etiqueta de script:
<script type="text/javascript">
if (screen.height < 900) {
document.write('<link href="UrLowRes.css" type="text/css" rel="stylesheet"/>');
} else {
document.write('<link href="UrlHighRes.css" type="text/css" rel="stylesheet"/>');
}
</script>
Incluso se puede añadir otros if declaraciones para teléfonos inteligentes y tabletas.
está solicitando una solución que no sea de JavaScript. –
Normalmente, las personas no "conectan otra hoja de estilo" para la resolución de pantalla porque puede cambiar el tamaño del navegador después de cargar la página, cambiar la resolución y no desea cargar el archivo cada vez que lo hace.
Esto va a hacer el truco, en un solo archivo CSS:
Ex:
/* css as usual */
.this-class { font-size: 12px; }
/* condition for screen size minimum of 500px */
@media (min-width:500px) {
/* your conditional/responsive CSS inside this condition */
.this-class { font-size: 20px; }
}
esto debe cambiar el tamaño de fuente de 20px cuando la condición de consulta @media es cierto, en este caso, cuando el la pantalla tiene más de 500 px.
A medida que aumente o disminuya el tamaño de su navegador, verá que las reglas de CSS condicional surten efecto automáticamente, no es necesario JS.
buena respuesta, votado en contra: D – ncomputers
sí, es una lástima que haya una fuerte correlación entre 1024 * 768 y navegadores antiguos (¡no css3)! - con las netbooks en aumento, la correción de res-css puede cambiar – Haroldo
Cree para pantallas angostas y use una consulta de medios para detectar ventanas más amplias y anular el diseño. – Quentin
Actualización: Mucho ha cambiado desde 2010 y las consultas de medios de CSS son aceptadas globalmente en la actualidad y están soportadas en todos los principales navegadores. –