viewport

@media

Dispositivos a aplicar CSS:

• all :todos los medios definidos
• braille: dispositivos que usan braille
• embosed: impresoras braille
• handheld:dispositivos de mano(PDA,moviles,etc)
• print: impresoras
• projection: dispositivos de proyección.
• screen:pantallas de ordenador
• speech: sintetizadores de voz
• tty:dispositivos como teletipos y terminales de texto
• tv: televisores o dispositivos de baja resolución.

Los dispositivos en verde están obsoletos.

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

De esta manera importamos un archivo css para aquellos dispositivos que son pantallas de ordenador.

Podriamos haber especificado varios dispositivos si hubiesemos querido.

También podemos espeficar otros archivos css para otros dispositivos, así cada uno tendrá distintos estilos.

Dentro de nuestro archivo html en el head

<link rel="stylesheet" media="screen and (max-width:700px)" href="css/basico.css" />

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

De esta manera le damos estilo a diferentes tamaños del monitor.

Así conseguimos que diferentes tamaños de pantalla tengan diferentes estilos. Es muy útil para el tamaño de dispositivos móviles o tablets.

Dentro de nuestro archivo html en el head

@media screen and (max-width:800px) {body{

width:100%}}

De esta manera dentro de un archivo css podemos darle estilo a determinadas pantallas según su tamaño.

En este caso el estilo que le damos a body, sólo influirá en aquellos dispositivos que tengan una pantalla hasta 800 px de ancho.

Dentro de nuestro archivo .css

Operadores lógicos:and, or y not

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

@media not all and (max-width: 600px) {
  html { background: red; }
}

Dentro de nuestro archivo .css

• Usaremos "max-width","min-width","max-height", "min-height" cuando queramos definir el tamaño de la pantalla de un ordenador.
• Usaremos "max-device-width", "min-device-width", "max-device-height", "min-device-height" lo usaremos para las pantallas de los dispositivos móviles y tablets.
• "aspect-ratio" y "device-aspect-ratio"
• "color" , "color-index" y "monochrome"
• "resolution"

Otras características

• orientation: es otra característica que podemos definir, pondremos "portrait" para panóramico y para una vista vertical pondremos "lanscape".   
•   @media all and orientation: portrait { ... }
• <link rel="stylesheet" and  media="orientation:landscape herf=".... .css"/>                                                                    

Se puede definir de las dos maneras anteriormente definidas.

Otras características

/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
  /* some CSS here */}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /* some CSS here */}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /* some CSS here */}
/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2){
  /* some CSS here */}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
  /* some CSS here */}
/* #### Desktops #### */
@media screen and (min-width: 1024px){
  /* some CSS here */}