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
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
</body>
</html>
-Creamos en el body una capa llamada capa1 <div class="capa1">
Y varias capas más:
Todas las capas tendran su clase propia y ademas una genereal de capas que sirven para todas igual.
<div class="capa capa1">
Esta es la capa 1
</div>
<div class="capa capa2">
Esta es la capa 2
</div>
<div class="capa capa3">
Esta es la capa 3
</div>
<div class="capa capa4">
Esta es la capa 4
</div>
<div class="capa capa5">
Esta es la capa 5
</div>
-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 class="movil">
capa para movil
</capa>
<capa class="escritorio">
capa para escritorio
</capa>
<capa class="tablet">
capa para tablet
</capa>
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*/
<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>
