Tutorial medio - Web flexible o responsive design
Esto es para los usuarios que manejan un poco el css , aunque el código sea sencillo¿Que es una web flexible o responsive design?
Una web flexible o responsive design es aquella página que se adapta a las resoluciones de cualquier navegador de manera eficaz.
Parece que sea un trabajo descomunal , lo es , pero efectivo seguro.
Muy bién comenzemos el verdadero tutorial
¿Averiguando resoluciones de pantalla?
Existen dos programas muy buenos que sirven para ver como quedaría nuestra página en otras resoluciones.
Son :
-Windows Resizer (Extensión para google chrome)
-Opera Mobile Emulator
Ahora vamos a por el codigo
Primero para que el código sea aceptado por el móbil tendremos que poner esto por encima de la página.
| Código: |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /></meta> |
El css que muestro a continuaciín es el ejemplo que utilizaremos para la adpatación.
min-width:Es la menor cantidad de pixeles en la que se verá esa resolución.
max-width:Es la máxima anchura de pixeles en la que se verá esa resolucion
| Código: |
@media only screen and (min-width:100px) and (max-width:500px){ body{ background-color:red; } } @media only screen and (min-width:500px) and (max-width:1000px){ body{ background-color:yellow; } } @media only screen and (min-width:1000px) and (max-width:2000px){ body{ background-color:green; } } |
Si os vais a poner a trabajar con este código recomiendo saber un poco antes de css.
Saludos!