@media
Los dispositivos en verde están obsoletos.
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
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
@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
Otras características
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 */}
Otros enlaces para consultar tamaños serían estos:
Además de poder usar los visualizadores tanto de Mozilla como de Google Chrome, aquí tenemos un enlace para ver como queda nuestra web
http://nmsdvid.com/snippets/Encontraremos "viewport" dentro de una entiqueta <meta> dentro del <head> del código HTML.
El elemento "viewport" dentro de la etiqueta <meta> le dá información al navegador sobre la escala y dimensión de la página.
Dentro de nuestro archivo html en el head
En "content" introduciremos todas las propiedades separadas con comas que queremos dotarle a la meta etiqueta "viewport".
Dentro de nuestro archivo html en el head
Esta propiedad de width le dá el ancho que queremos darle a la web.
Como recomendación , pondremos este valor que indica que se toma el ancho del dispositivo donde se carga la web.
Dentro de nuestro archivo html en el head
Esta propiedad de "initial-scale" le indicamos que escala tendrá nuestra web en el dispositivo.
Las otras dos propiedades "maximum-scale" y "minimum-scale" es para definir hasta que punto queremos que nuestra web se pueda hacer más grande o más pequeña.
Dentro de nuestro archivo html en el head
Esta propiedad de "user-scalable" hace que indiquemos si la web se puede escalar en un dispositivo.
Se recomienda que una web esté en "user-scalable=no", para que no se pueda escalar.
Esto es lo mismo que si utilizamos "maximun-scale=1, minimun-scale=1".
Dentro de nuestro archivo html en el head
https://bermartinv.github.io/css/files/taller/menu_taller.html