Cargar CSS distintos según dispositivo

Podemos cargar diferentes hojas de estilo dependiendo de si la web se está visualizando en un dispositivo móvil o en un PC gracias al atributo media. Esto nos permitirá adaptar la apariencia de nuestra web sin necesidad de crear 2 versiones del site.

El atributo media aplica los estilos dependiendo del dispositivo con el que se está navegando. Para los estilos de pantallas de PC y portátiles le ponemos "screen" y para móviles "handheld".

<style type="text/css" media="screen">...</style>


<style type="text/css" media="handheld">...</style>

Enlazando a hojas de estilo:

<link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />


<link href="movil.css" rel="stylesheet" type="text/css" media="handheld" />

Algunos valores para media:
all: Todos
screen: pantallas de PC
handheld: móviles
print: impresoras
projection: proyectores
tv: televisores