한 걸음씩

[web][css] mediaquery 본문

Web

[web][css] mediaquery

winter17 2023. 5. 12. 11:34

[좌]모바일 [우]데스크탑

반응형 웹사이트를 만들 때는 모바일을 기준으로 먼저 만들고 데스크탑로 넘어가야 한다

모바일에서 만들어둔 코드를 참고하면서 데스크탑에서 수정할 부분만 mediaquery로 만들어주면 된다

min-width ~이상

max-width ~이하

/* 데스크탑 버전 */
@media screen and (min-width: 768px){
  .banner{
    top: 0;
    bottom: auto;
    /* margin-bottom: 169px; */
  }
  .banner-title a{
    height: 80px;
  }
  .landing{
    align-items: center;
    /* padding-top: 169px; */
  }
  .landing-title{
    font-size: 50px;
    text-align: center;
    margin-bottom: 32px ;
  }
  .landing-link {
    width: 180px;
    height: 56px;
    font-size: 18px;
  }
}

 

 

html파일에서 반응형을 명시하는 부분은 head의 meta

<head>
    <meta charset="UTF-8" />
    <!-- viewport는 css의 mediaquery와 같다 -->
    <!-- viewport의 넓이를 장치 넓이에 맞춰줘! -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

'Web' 카테고리의 다른 글

[web][css] transition, animation  (0) 2023.05.16
[web][css] typography  (0) 2023.05.12
[Web] UX & UI  (0) 2023.03.08
[Web] Grid system for responsive web design  (0) 2023.03.08
[Web] Fundamentals of Bootstrap  (0) 2023.03.06
'Web' Related Articles more