반응형 media screen 태그

_reset.scss

@media screen and (max-width: variable.$wid_tablet) {
  body {
    background-color: hotpink;
  }
}

@media screen and (max-width: variable.$wid_map) {
  body {
    background-color: aqua;
  }
}

_common.scss

.btnMobileMenu 클래스로 지정한 태그.

</a>

// tablet
@media screen and (max-width: variable.$wid_tablet) {
  div {
    width: 90%;

    header {
      justify-content: space-between;

      h1 {
        font-size: 1.4rem;
      }

      nav {
        display: none;
      }

      /* block: 안보이는 걸 보이게 하는 역할. display:none을 해제한다. */
      .btnMobileMenu {
        display: block;
      }
    }
  }
}

// M.P
@media screen and (max-width: variable.$wid_map) {
  body {
    padding: 0px;
  }
  div {
    width: 100%;
    border-radius: 0px;

    header {
      h1 {
        font-size: 1.2rem;
      }
    }

    footer {
      justify-content: center;
      flex-wrap: wrap;
      align-content: center;

      ul {
        width: 100%;
        display: flex;
        justify-content: center;
      }

      p {
        width: 100%;
        text-align: center;
      }
    }
  }
}

_profile.scss

// tablet
@media screen and (max-width: variable.$wid_tablet) {
  main {
    flex-wrap: wrap;

    figure {
      width: 100%;
      margin-bottom: 15px;
    }

    article {
      width: 100%;
    }
  }
}

뷰 기준 width, height

화면 사이즈 조절에 따라 v값이 변경된다.

사용방법:

vw(화면의 가로길이)를 height(세로)에 적용하여, 가로 길이 변화에 따라 세로 길이도 함게 줄어들게 한다. 가로 길이가 변화하면, 이미지 또는 특정 영역의 비율이 유지되면서 줄어든다.

vw (viewport width)

-현재 뷰포트의 가로폭을 100등분한 단위

-브라우저의 너비를 풀스크린으로 지정할 때는 vw보다는 100%를 주로 사용

-vw는 브라우저 오른쪽의 스크롤바 너비를 포함하지 않음

vh (viewport height)

-현재 뷰포트의 세로높이를 100등분한 단위

-보통 브라우저의 높이값을 풀스크린으로 지정할때 사용

vmin (viewport minmal size)

-뷰포트의 너비, 높이중 작은쪽을 기준으로 100등분한 단위

-보통 모바일 디바이스에서만 특정 요소에 가변크기를 지정할 때 사용

vmax (viewport maximal size)

-뷰포트의 너비, 높이중 큰쪽을 기준으로 100등분한 단위

-보통 데스크탑 디바이스에서만 특정 요소에 가변크기를 지정할 때 사용