CursosEmpresasBlogLiveConfPrecios

Tutorial - Como aplicar el Diseño Resposive

Actualizado el 23 de mayo de 2023

18 min de lectura
ESCRITO POR
Ericka Tuchan

erickatuchan 5,655 Pts

Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

¡Hola Hola! 😃

En este tutorial voy a mostrarles como he aplicado el diseño responsive a una página web y su uso.💻👩‍💻

1️⃣ Iniciamos conociendo el diseño original de mi página.

🎮🧿 Este es el código utilizado para el HTML

<<body>
    <section class="section">
        <div class="card">
         <img src="https://scontent.fgua7-1.fna.fbcdn.net/v/t39.30808-6/345426383_898341447905155_1060563709585093578_n.jpg?_nc_cat=106&cb=99be929b-59f725be&ccb=1-7&_nc_sid=8bfeb9&_nc_ohc=Ci63DEEUeAQAX9xTMip&_nc_ht=scontent.fgua7-1.fna&oh=00_AfDMfd45xTQiLj6HiQOjKoTRN62nQjuVUlzrI9x0v2SsXw&oe=64719480" alt="pantalla">
         <div class="foto"><img src="https://lh3.googleusercontent.com/pw/AJFCJaWEu9GwFpgmW5T75brQiAlacKCIC2Bwb3YE6_t89_1slOHjlmE75kAe2JQS4mP1i-3uZQychmR2ya5n04JTEPHG5zTg9TejoMEHqBQxmte3bEgKUCAkVUX66ecB_QBsMtFqOCyzD3PTlMBv_XH90J7DvRI529F8HFVYtO4EyWQV4ckuyYn3dtxNKRZXOBhKOpKm72rglDuePKzLqb1w15eFhwKi7Wi22xIB2RH2qm4lFQz3FMVjOUZ54a9dejMumFy3U5nDed--1rvu_hn71U6ajS-GvoJwq4QIPni6S1zjOTCuniZ_yo54ivlPqxcJ5QTtNEwd9yEp7vRRu14PeRk-dgnoNN7RPkLTH7zsPOk21Twd7A8MF-FI-6TW0P-pVSr7kiikoftXfAwOE9qbs5M4WpIwEYlCQE2U6HZbzk71cs3WwtwfGow26NrOkbXMou--R05No4EHJvJn47hvMiyrauqURu5kXzRrW51m-oTwZ0JtNHuXcEOtiOtpjmBnQgnvxQeln400tU595vnn4J2y2cMHlDt-kNXGzdoebO85qXdNu4lPuocXjsh2UFReqdncK1Ig_Nn0aCMhoBPhYXNYKA5x8lvEKb1TNWBXsyM0zOUK3ZnIThu2CXFwZ9IM7lzmHTkRFPa2xCMXBWm8y-93ezye9-s4ZiBifQ7YYsGKIRWZI0GV62vrMWyO5qX8JmehGXhi9i5SJN3afDfejvM3KoQHnXB-VacqO8-2mdT8Z8coq_EwsLFl8BZ6d8HR-MGDA1V-H3GRA1NqNeGC2VFHLWWuTCfG_IR2nd7Y6OXBDhz_3bt_tQpJvHDqKKv2N50qMAIMcVDWCUU8ImOytvGokSoedGu-HPivt0QAh-5vLE3gVx4sLLoQZgkYgza--PvSrSlBlQ49c_uBhq81nZrv8Xl8VyLEUqxYUYR4tNOMFv6e-S-BRUKfMvK9HHZTKoVrvQWlY8xsRz_PgQ06ve72aiX3mQ=w400-h400-s-no?authuser=0" alt="foto"></div>
         <p>Ericka Tuchán</p>
         <p>Frontend Developer, Digital Designer</p>
          <ul class="list">
             <li><i class="fa-solid fa-map-pin"></i>Guatemala</li>
             <li><i class="fa-brands fa-square-instagram"></i>@erickatuchan</li>
          </ul>
           <div class="rectangulo">
              <div class="mitad-izquierda">
                 <h1>23,115</h1>
                 <p>Followers</p>
                 <!-- Contenido de la mitad izquierda -->
              </div>
              <div class="mitad-derecha">
                 <h1>11,995</h1>
                 <p>Following</p>
                 <!-- Contenido de la mitad derecha -->
               </div>
           </div>
           <!-- Contenido de Boton Follow -->
            <div class="rectangulo-2">
                <h1>Follow</h1>
            </div>
        </div>
    </section>
</body>>

Este el código utilizado para el CSS 🎨🖌️

<        .section{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card{
            width: 500px;
            height: 700px;
            background-color: GhostWhite;
            border-radius: 20px;
            overflow: hidden;
        }
        .card img:nth-child(1){
            width: 100%;
            position: relative;
            z-index: 1;
        }
        .foto{
            width: 200px;
            height: 100px;
            z-index: 3;
        }
        .foto img{
            border-radius: 50%;
            border: 10px solid ghostwhite;
            z-index: 2;
            top: -150px;
            left: 145px;
        }
        .card p{
            text-align: center;
        }
        .card p:nth-child(3){
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: 30px;
            color: DarkSeaGreen;
            font-weight: bold;
            margin-top: -30px;
        }
        .card p:nth-child(4){
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            color: MediumAquamarine;
            font-weight: 50;
            margin-top: -30px;
        }
        .list {
            list-style: none;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            margin-top: 50px;
        }
        .list li{
            font-size: 18px;
            font-family: Arial, Helvetica, sans-serif;
            font-weight: 50;
            color: LightSeaGreen;
        }
        .list .fa-map-pin{
            font-size: 25px;
            margin-right: 15px; 
            color:  DarkCyan;   
        }
        .list .fa-square-instagram{
            font-size: 25px;
            margin-right: 15px; 
            color:  LightSeaGreen;   
        }
        .rectangulo {
        width: 499px;
        height: 80px;
        position: relative;
        margin-top: 20px;
        } 
        .mitad-izquierda,
        .mitad-derecha {
        width: 50%;
        height: 100%;
        position: absolute;
        }
        .mitad-izquierda {
        left: 0;
        background-color: GhostWhite;
        border: 2px solid LightSteelBlue;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        }
        .mitad-izquierda h1{
            margin-top: 20px;
            color: LightSteelBlue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-bottom: -20px;
            font-weight: 800;
        }
        .mitad-izquierda p{
            margin-top: 20px;
            color: CadetBlue;
            font-family: Arial, Helvetica, sans-serif;
            font-size:20px;
            font-weight: 300;
        }
        .mitad-derecha{
        right: 0;
        background-color: GhostWhite;
        border: 2px solid LightSteelBlue;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        }
        .mitad-derecha h1{
            margin-top: 20px;
            color: LightSteelBlue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 20px;
            margin-bottom: -20px;
            font-weight: 800;
        }
        .mitad-derecha p{
            margin-top: 20px;
            color: CadetBlue;
            font-family: Arial, Helvetica, sans-serif;
            font-size:20px;
            font-weight: 300;
        }
        .rectangulo-2{
        width: 498px;
        height: 93px;
        position: relative;
        margin-top: 0px;
        background-color: SkyBlue;
        border: 2px solid LightSteelBlue;
        }
        .rectangulo-2 h1{
            display: flex;
            justify-content: center;
            font-family: Arial, Helvetica, sans-serif;
            color: whitesmoke;
            font-size: 25px;
            position:relative;
            top: 10px;
            
        }>

2️⃣ Aplique un diseño responsive cuando se vea en dispositvos mayores a 768 px, haciendo cambio en las dimensiones y colores. Teniendo así un dark moode.

🖍️📿 Este es el código CSS

@media (min-width: 768px) {
  body{
    background-color: DarkSlateGray	;
  }
  .section.card {
    background-color: black; /* Cambio de color de fondo */
    width: 800px;
    height: 1200px;
  }
  .section.foto{
    width: 400px;
    height: 300px;
  }
  .section.fotoimg{
    border: 10px solid black;
    left: 170px;
  }
  .section.cardp:nth-child(3){
    color:DarkOrchid;
    font-size: 40px;
  }
  .section.cardp:nth-child(4){
    color: Thistle;
    font-size: 25px;
  }
  .card.listli{
    color: DarkOrchid;
    font-size: 30px;
  }
  .card.list.fa-map-pin{
    color: Thistle;
    font-size: 35px;
  }
  .card.list.fa-square-instagram{
    color: Thistle;
    font-size: 35px;
  }
  .card.rectangulo{
    width: 799px;
    height: 120px;
    top: 30px;
  }
  .rectangulo.mitad-izquierda{
    background-color: black;
    border: 2px solid DarkSlateGray;
  }
  .rectangulo.mitad-izquierdah1{
    color: Thistle;
    font-size: 30px;
  }
  .rectangulo.mitad-izquierdap{
    color: DarkOrchid;
    font-size: 32px;
  }
  .rectangulo.mitad-derecha{
    background-color: black;
    border: 2px solid DarkSlateGray;
  }
  .rectangulo.mitad-derechah1{
    color:Thistle;
    font-size: 30px;
  }
  .rectangulo.mitad-derechap{
    color: DarkOrchid;
    font-size: 32px;
  }
  .card.rectangulo-2{
    width: 798px;
    height: 120px;
    background-color: DarkSlateBlue;
    border: 2px solid DarkSlateGray;
    top: 35px;
  }
  .card.rectangulo-2h1{
    color: lavender;
    font-size: 40px;
    top: 0px;
  }
}

3️⃣ Y para los dispositivos que vean la página en 510px o menos, solo adecué los tamaños para que no perdiera su forma y orden, maneje los mismos colores.

Este es el código CSS 🖼️👩‍🎨

<@media (max-width: 510px) {
.section.card {
width: 280px;
height: 450px;
}
.section.foto{
width: 100px;
height: 100px;
}
.section.fotoimg{
border: 5px solid GhostWhite;
top: -60px;
left: 80px;
}
.section.cardp:nth-child(3){
color:DarkSeaGreen;
font-size: 18px;
margin-top: -45px;
}
.section.cardp:nth-child(4){
color: MediumAquamarine;
font-size: 15px;
margin-top: -20px;
}
.card.listli{
color: LightSeaGreen;
font-size: 12px;
margin-top: -20px;
}
.card.list.fa-map-pin{
color: DarkCyan;
font-size: 15px;
margin-right: 5px;
margin-left: -20px;
}
.card.list.fa-square-instagram{
color: DarkCyan;
font-size: 15px;
margin-right: 5px;
}
.card.rectangulo{
width: 280px;
height: 60px;
top: 10px;
}
.rectangulo.mitad-izquierda{
background-color: GhostWhite;
border: 1px solid LightSteelBlue;
}
.rectangulo.mitad-izquierdah1{
color: LightSteelBlue;
font-size: 15px;
}
.rectangulo.mitad-izquierdap{
color: CadetBlue;
font-size: 15px;
}
.rectangulo.mitad-derecha{
background-color: GhostWhite;
border: 1px solid LightSteelBlue;
}
.rectangulo.mitad-derechah1{
color:LightSteelBlue;
font-size: 15px;
}
.rectangulo.mitad-derechap{
color: CadetBlue;
font-size: 15px;
}
.card.rectangulo-2{
width: 280px;
height: 60px;
background-color: SkyBlue;
border: 1px solid LightSteelBlue;
top: 12px;
}
.card.rectangulo-2h1{
color: whitesmoke;
font-size: 18px;
top: 0px;
}
}>

Espero que pueda servirles, y serles de ayuda para comprender mejor como hacer responsive nuestros proyectos. 🚀👩‍🚀

Algo que fue muy importante para mi y al inicio, me dificultaba el poder aplicar los cambios en mi código fue que
no tenía la sección y todos los divs con una clase asignada, y al hacerlo en css si era necesario por prioriad y
especificidad tener las clases asignadas. 📝💻

Saludos!! 😃

Curso de Frontend Developer

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados

✨Presente continuo✨

Hola PlatziNauta! 👩🏽👋🏽 Te comparto mis apuntes para que ¡Nunca pares de aprender! 👇🏽 más apuntes en: https://byiris.netlify.app

iris-val

iris-val

5

Resultados

¿Cuál ha sido el reto más grande al que te has enfrentado como líder?Aprender a comunicar mis ideas, asegurarme que la otra persona ente

illanes.mayte

illanes.mayte

3

Apuntes teóricos

PRIMER BLOQUE: ¿Para qué sirve la estadística descriptiva?Estadística descriptiva vs inferencialEstadística de un jugador de fútbol:

maurojasnova

maurojasnova

13

Lettering, el arte de dibujar letras - Proceso de entintado

A través de este vídeo te mostraré cómo entintar un boceto que ya has definido como tu creación. Es recomendable hacer tu boceto inicialment

MelanieViToM

MelanieViToM

1