Invierte en tu educación con el precio especial
Antes:$249
Paga en 4 cuotas sin intereses
Termina en:
12d
17h
10m
00s
en este tutorial veremos como pasar nuestro proyecto a un diseño responsivo. Para lograr esto usare @media
1.primero armamos nuestro proyecto.
2. le damos los estilos necesario a nuestro proyecto
3. usando @media con un max-width en este caso de 700px iremos adaptando nuestro proyecto a su versión mobile
<body><navclass="nav"><divclass="container"><h1>navegacion</h1></div></nav><!-- section --><sectionclass="section"><divclass="content-right"><h1>contenedor derecho</h1></div><divclass="content-left"><h1>contenedor izquierdo</h1></div></section><footerclass="footer"><divclass="container"><h1>pie de pagina</h1></div></footer></body>html {
font-size: 62.5%;
}
.nav {
width: 100%;
height: 6rem;
padding: 0.1rem2rem;
background-color: Yellow;
display: flex;
align-items: center;
position: fixed;
top: 0;
}
.section {
display: flex;
height: 100vh;
}
.content-right,
.content-left {
width: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.content-right {
background-color: Lavender;
color: black;
font-size: 2.4rem;
}
.footer {
display: flex;
align-items: center;
padding: 0.1rem2rem;
height: 6rem;
background-color: GreenYellow;
}
@media screen and (max-width: 700px) {
.section {
flex-direction: column;
}
.content-right,
.content-left {
width: 100%;
height: 50%;
}
}
