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>
<nav class="nav">
<div class="container">
<h1>navegacion</h1>
</div>
</nav>
<!-- section -->
<section class="section">
<div class="content-right">
<h1>contenedor derecho</h1>
</div>
<div class="content-left">
<h1>contenedor izquierdo</h1>
</div>
</section>
<footer class="footer">
<div class="container">
<h1>pie de pagina</h1>
</div>
</footer>
</body>
html {
font-size: 62.5%;
}
.nav {
width: 100%;
height: 6rem;
padding: 0.1rem 2rem;
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.1rem 2rem;
height: 6rem;
background-color: GreenYellow;
}
@media screen and (max-width: 700px) {
.section {
flex-direction: column;
}
.content-right,
.content-left {
width: 100%;
height: 50%;
}
}
Curso de Frontend Developer
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
0 Comentarios
para escribir tu comentario
