Curso 7
-En el curso vamos a ver formas de colocar colores y vistas de móvil y vistas en responsive, diferentes tamaños de pantalla.
-Comenzamos con un archivo llamado index.html con estilo.css colocado en css #estilo.css
-Creamos en el body una capa llamada capa1
Y varias capas más:
Todas las capas tendran su clase propia y ademas una genereal de capas que sirven para todas igual.
Esta es la capa 1
Esta es la capa 2
Esta es la capa 3
Esta es la capa 4
Esta es la capa 5
-Ahí incluimos css para las capas
.capa{padding:20px; margin:20px;}
.capa1{background-color: pink;} /*Color por su nombre en ingles*/
.capa2{background-color:#ff0000;} /*Color en valor hexadecimal*/
.capa3{background-color:rgb(125,125,0); } /*Color por valor rgb*/
.capa4{background-color:rgba(125,125,0,0.5); } /*Color por valor rgba, que es opacidad (a) de 0a 1*/
.capa5{background-color:#ff0000; opacity: 0.8;} /*Color y opacidad de capa*/
-Ahora vamos a ver estilos para diferentes resoluciones:
capa para movil
capa para escritorio
capa para tablet
Y luego su estilo en css: Lo tenemos para diferentes resoluciones.
@media (max-width:600px){ /*Esto sería un movil*/
.movil { display:block; }
.escritorio { display:none; }
.tablet { display:none;}
}
@media (min-width:600px) and (max-width: 900px){ /*Esto sería una tablet*/
.movil { display:none; }
.escritorio { display:none; }
.tablet { display:block;}
}
@media (min-width:900px){ /*Esto sería un escritorio*/
.movil { display:none; }
.escritorio { display:block; }
.tablet { display:none;}
/*Para una web responsive se pone en el head una etiqueta meta name viewport*/
