CSS, dando formato a la web
Diseño para móvil
Vamos a crear donde tenemos grabada
nuestra web index.html una carpeta que llamaremos “css” y dentro de esta
carpeta crearemos un archivo llamado “estilos.css”.
En el “head” de index, os recuerdo que
ya incluimos la siguiente línea: <link
rel="stylesheet" href="css/estilos.css"
type="text/css"/>, esta línea enlaza al archivo de estilos
que vamos a preparar a continuación.
Para comenzar con el formato de la
web, personalmente prefiero primero prepararla para móvil y después para
escritorio, por lo que debemos añadir la siguiente línea al “head”: <meta name="viewport"
content="width=device-width, initial-scale=1">.
En el archivo estilos.css añadimos lo
siguiente:
@media screen and
(min-width:480px){}
@media screen and
(min-width:767px){}
@media screen and
(min-width:950px){}
Con lo que podemos poner dentro de las
llaves de cada uno los estilos y atributos para móvil, tablet y PC’s, debido al
minimo de ancho que especificamos en pixeles (480, 767 y 950).
Ahora vamos a diferenciar las partes
de nuestra web añadiendo colores llamativos al CSS para ver claramente las
partes, una vez que situemos todo bien pasaremos a poner una gama de colores menos
llamativa.
header{
background:cyan;
}
nav{
background:yellow;
}
section{
background:brown;
}
article{
background:red;
}
aside{
background:blue;
}
footer{
background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and (min-width:767px){
header{
background:green;
}
nav{
background:cyan;
}
section{
background:pink;
}
article{
background:yellow;
}
aside{
background:red;
}
footer{
background:brown;
}
}
@media screen and
(min-width:950px){
}
Con el código anterior puesto en el
archivo css, una vez grabado, podréis observar, al ejecutar la web index.html
en el navegador, que al disminuir el tamaño los colores de fondo cambiaran. Con
esto hemos conseguido que al cambiar el tamaño de la visualización cambien los
colores de fondo, ahora vamos a cambiar también la disposición de los bloques
según se vean en un dispositivo u otro, para ello cambiamos el código css a:
*{
margin:0px;
padding:0px;
}
header,nav,section,article,aside,footer{
display:block;
}
header{
background:cyan;
}
nav{
background:yellow;
}
section{
background:brown;
}
article{
background:red;
}
aside{
background:blue;
}
footer{
background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and
(min-width:767px){
header{
background:green;
}
nav{
background:cyan;
}
section{
background:pink;
display:inline-block;
width:74%;
}
article{
background:yellow;
}
aside{
background:red;
display:inline-block;
vertical-align:top;
width:23%;
}
footer{
background:brown;
}
}
@media screen and
(min-width:950px){
}
Quedando nuestra web en modo
escritorio:
Y en modo móvil:
Os explico las modificaciones en este
código, lo primero que cambiamos es:
*{
margin:0px;
padding:0px;
}
header,nav,section,article,aside,footer{
display:block;
}
Con esto indicamos con el “*”
(selector universal) que eliminamos todos los márgenes y paddings, el padding
es como un margen interior.
Despues separamos todos los
identificadores usados con “,” para darles a todos formato para que actúen como
bloques y se visualicen uno debajo del otro según el orden que tienen en el
html.
Seguidamente, dentro del apartado css
para las tablets minimo de ancho 767px, introducimos el siguiente código:
section{
background:pink;
display:inline-block;
width:74%;
}
article{
background:yellow;
}
aside{
background:red;
display:inline-block;
vertical-align:top;
width:23%;
}
Como podeis ver, el primer cambio es
que en vez de visualizarse en bloque como indicamos anteriormente, ahora
indicamos que se visualicen en línea e indicamos un ancho en porcentaje para
que quepan las dos partes, alineando el “aside” verticalmente arriba (top). El
ancho se puede indicar mediante pixeles, os recomiendo hacer cambios y probar.
Con esto ya tenemos la web preparada
para varios dispositivos, ahora pasaremos a darle un formato mejor.
En la siguiente entrada profundizare en el formato CSS para cada componente de nuestra web.
Gracias.
No hay comentarios:
Publicar un comentario