También conocido como “diseños dependientes de la resolución”. Sitio web único, diferentes archivos CSS para reorganizar un sitio web para aprovechar el tamaño disponible.
Existe una forma estándar W3C de declararlos. Una forma es probar el “ancho del dispositivo”, así:
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="https://css-tricks.com/resolution-specific-stylesheets/800.css" />El código anterior aplicará el estilo 800.css al documento solo si el dispositivo que lo visualiza tiene un ancho de 800 px o más. Y… admite “consultas de medios” de esta manera.
Tenga en cuenta que este es el ancho del dispositivo, no el ancho actual de la ventana del navegador. En el iPhone (3G(s)), eso significa 480px. Mi elegante MacBook Pro nuevo devolverá 1920 px para el ancho del dispositivo. Pero mi ventana real del navegador es solo la mitad de eso en este momento exacto. El ancho del dispositivo es bastante útil cuando se trata de dispositivos móviles en los que el navegador ocupa probablemente el 100 % de la pantalla siempre que esté en uso, pero es menos útil en los navegadores de computadoras portátiles o de escritorio.
Me parece mucho más útil el ancho actual de la ventana del navegador (“viewport”). Incluso podemos especificar hojas de estilo que solo se usarán cuando la ventana gráfica se encuentre entre dos tamaños de píxeles diferentes:
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="https://css-tricks.com/resolution-specific-stylesheets/css/medium.css" />Esa hoja de estilo solo tendrá efecto cuando la ventana actual del navegador tenga entre 701 y 900 píxeles de ancho.
Compatibilidad con navegador
IE 9+, Firefox 3.6+, Safari 3+, Cualquier Chrome, Opera 10+. Mozilla sugiere comenzar el atributo de medios de con “solo”, lo que ocultará la hoja de estilo de los navegadores más antiguos que no admiten consultas de medios. Eso puede o no ser lo que realmente quiere hacer… dependiendo del caso, por supuesto.
<link rel="stylesheet" media="only screen and (color)" href="https://css-tricks.com/resolution-specific-stylesheets/example.css" />En general, el diseño es una de esas cosas en las que es difícil vender “mejora progresiva”. Las esquinas redondeadas se convierten en cuadrados, no es gran cosa. Diseño desordenado, eso es un gran problema. Los dispositivos como el iPhone en este momento son geniales, ya que la elección del navegador es muy limitada (solía haber solo Mobile Safari y eso es todo, ahora también está Opera) y son muy buenos navegadores, puedes confiar en técnicas como esta trabajar.
Si el soporte de IE es primordial, ¡siempre tenemos JavaScript!
Haciéndolo con jQuery
Usando JavaScript, podemos probar el ancho de las ventanas y cambiar el archivo CSS activo en consecuencia. Esto funcionará en todos los navegadores. Puede tener una ID para un elemento como cualquier otro, así que agreguemos eso:
<link rel="stylesheet" type="text/css" href="https://css-tricks.com/resolution-specific-stylesheets/main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />Entonces podemos usarlo como gancho y cambiar el valor href de la hoja de estilo. El navegador verá ese cambio y dejará de aplicar el CSS anterior y volverá a aplicar el CSS recién vinculado. Ejecutaremos nuestra pequeña prueba de ajuste una vez de inmediato, y luego cada vez que se cambie el tamaño de la ventana a partir de entonces.
function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if (width < 900) {
$("#size-stylesheet").attr("href", "https://css-tricks.com/resolution-specific-stylesheets/css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});¿Es jQuery realmente necesario solo para esto?
No, pero estoy seguro de que sabes que así es como me desenvuelvo en general y lo hace más fácil. Kevin Hale escribió sobre diseños de resolución dinámica literalmente hace cinco años. Es JavaScript “en bruto” y todavía funciona muy bien hoy.
Además, hay un polyfill increíble: Respond.js
Video
Diseño dependiente de la resolución con CSS de Chris Coyier en Vimeo.
Ejemplo uno
Este tiene una hoja de estilo especial para ventanas de navegador estrechas (menos de 700 px), medianas (701 – 900 px) y anchas (más de 901 px).
Ver demostración
Ejemplo dos
Esto hace exactamente lo mismo que el ejemplo uno, solo a través de jQuery/JavaScript en lugar de consultas de medios CSS.
Ver demostración
Ejemplo tres
Este ejemplo muestra que podemos apuntar a dispositivos móviles probando un ancho máximo de dispositivo.
Ver demostración
Descargar
Enganche todos estos como referencia en un solo lugar.
Descargar archivos