[2-2] 반응형 웹 사이트 구축하기 (4) - 모바일 사이즈

// 2-2) 반응형 웹사이트 만들기
@media screen and (max-width: 1024px) {
  .contents p {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 768px) {
  .door-line {
    display: none;
  }
  .static-door-line {
    // 태블릿 사이즈에서는 이게 보이게 하기. (새로 만든 door-line )
    display: block;
  }
  .background {
    padding: 0;
    // 녹색 막대기 개수 조정
    span {
      // span태그 너비조정
      width: 25%;
      margin: 0;
      // span태그 4번쨰부터 9번째까지 없애주기!
      &:nth-child(n + 4) {
        display: none;
      }
    }
  }
  .logo-holder {
    width: 100%;
    padding: 1rem;
    img {
      // 이미지 전체로 채워주기
      width: 100%;
    }
  }
}
@media screen and (max-width: 450px) {
  .contents p {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 350px) {
  .contents p {
    font-size: 1.1rem;
  }
}

미디어 쿼리 사용해서 반응형 웹사이트 생성

  <div class="static-door-line"></div>

모바일용 door-line 새로 하나 더 생성