Diferentes hojas de estilo según el tamaño del navegador. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet CSS

¡votar!

Diferentes hojas de estilo según el tamaño del navegador

A la hora de dar estilos a los desarrollos, nos puede llegar a interesar que dependiendo del tamaño del navegador, los estilos que aplicaremos serán unos u otros. Para conseguir esto, lo podemos hacer de varias formas.

La primera forma lo podemos hacer en la llamada a la hoja de estilos, indicándole el mínimo ancho que debe de tener para que coja los valores del CSS.

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

En el ejemplo anterior, la hoja 800.css se aplicará siempre y cuando el dispositivo tenga un ancho de 800 px o superior.

Otra opción que tenemos es la posibilidad de que una hoja de estilo sea ejecutada cuando el tamaño del dispositivo esté entre dos valores posibles. Esto lo podemos hacer de la siguiente manera.

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

En el ejemplo anterior, se aplicarán los estilos cuando el tamaño del dispositivo estén entre 701 y 900 px.

Otra opción para conseguir esto es hacerlo mediante el uso de jQuery. Nosotros podemos testear con javascript el tamaño del dispositivo, y según su valor, asignar una u otra hoja de estilos. Por ejemplo, en nuestra aplicación podríamos tener las siguientes llamadas a las hojas de estilo.

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

Le hemos indicado un “id” para luego poder hacer referencia a ese elemento y poder modificar la hoja de estilos a utilizar. El código javascript que nos haría esta función sería:

function adjustStyle(width) {
width = parseInt(width);
if (width < 701) {
$("#size-stylesheet").attr("href", "css/narrow.css");
} else if ((width >= 701) && (width < 900)) {
$("#size-stylesheet").attr("href", "css/medium.css");
} else {
$("#size-stylesheet").attr("href", "css/wide.css");
}
}
$(function() {
adjustStyle($(this).width());
$(window).resize(function() {
adjustStyle($(this).width());
});
});

Vía: css-tricks.com