Actualización:
Para el apoyo del navegador cruz, mi respuesta a continuación es el "rodar su propio" método. En los últimos años, sin embargo, se han desarrollado excelentes polyfills para resolver este problema. Por lo general, es una buena idea ir con uno de estos en lugar de rehacer todo ese trabajo. Respond.js es uno de los más conocidos. Solo enlace a él:
<script src="/path/to/respond.js"></script>
Luego, escriba sus consultas multimedia en su archivo css y listo.
Como robertc señaló, las consultas de medios CSS debe ser su punto de partida, pero debe tenerse en cuenta que no son una solución completa a este problema. Desafortunadamente, las consultas de medios css no son compatibles con todos los navegadores (tos IE). El código de consulta de medios en sus archivos css simplemente será ignorado por estos navegadores.
Además de las consultas de css media, consideraría tener una solución de javascript de respaldo que determinará el tamaño de la ventana gráfica, luego simplemente agregue una clase a la etiqueta de cuerpo. En este ejemplo se utiliza jQuery simplemente por razones de brevedad:
function setImageClass() {
switch(true) {
case($(window).width()>600): $("body").removeClass("w200 w400").addClass("w600");
break;
case($(window).width()>400): $("body").removeClass("w200 w600").addClass("w400");
break;
default: $("body").removeClass("w400 w600").addClass("w200");
break;
}
}
$(document).ready(function() {
setImageClass();
});
$(window).resize(function() {
setImageClass();
});
Por cierto, estos tamaños no son realistas, simplemente para facilitar las pruebas en todos los dispositivos. Recuerde, se tendrán en cuenta las preguntas de los medios de CSS, lo que además de esos, es necesario establecer las reglas para las clases que los conjuntos de javascript:
.w200 { background:red }
.w400 { background:orange }
.w600 { background:yellow }
Sin embargo, no quieren las 2 reglas CSS que chocan cuando tanto las consultas como el js funcionan, por lo que sus consultas de medios deben usar los mismos nombres (y se colocarán después). Ejemplo:
@media (min-width:200px) {
.w200 {
background:red;
}
}
...
Puse un violín para mostrar esto en acción. Esto solo incluye la solución de javascript, pero de nuevo, apoyo totalmente las consultas de medios como la solución principal.Here is the full screen link.
Gracias Robert! Leeré toda la página que me envíe, sin embargo, ¿puedo preguntar brevemente cuál es el ancho mínimo del ancho de la ventana del navegador o la resolución de pantalla? Y, ¿no crees que debería usar la altura como un factor en lugar del ancho? Gracias :) – pufAmuf
@pufAmuf Es la ventana del navegador, para la resolución de pantalla use 'min-device-width' y/o' max-device-width'. – robertc