[2015.11.27] CSS3 vh, vw (viewport units) 를 활용한 반응형 글상자 ( proportional box xovering viewport )

아래 이미지처럼 화면 크기에 따라 비율은 유지되면서 폰트 크기가 변화되는 것을 볼 수 있습니다.

CSS Review

html {  background: #f9f9f9; }

body {  margin: 0; }

.slide {
  /* relevant part */
  position: absolute;
  top: 0;
  left: calc(50vw - 66.66667vh);
  width: 133.33333vh;
  height: 100vh;
  /* non-essential styles */
  overflow: hidden;
  box-sizing: border-box;
  padding: .5em;
  background: #e53b2c;
  color: #f9f9f9;
  font: 4.5vmin sans-serif;
}
@media (max-aspect-ratio: 4 / 3) {
  .slide {
    top: calc(50vh - 37.5vw);
    left: 0;
    width: 100vw;
    height: 75vw;
  }
}

일반적으로 사용하지 않는 단위들이 많이 보이네요.ㅎㅎ

오늘은 여기서 주로 사용된 Viewport unit ( 반응형 단위정도로 생각하면 됨 )에 대해서 살펴보겠습니다.

vh와 vw

vh 요소는 높이값의 100분의 1의 단위입니다. 

예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻 입니다.

그와 유사하게 뷰포트의 너비값이 1600px이면 1vw는 16px이 됩니다.

vmin과 vmax

vh와 vw이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vmin과 vmax는 너비값과 높이값에따라 최대, 최소값을 지정할 수 있습니다. 예를 들면 브라우저의 크기가 1200px 너비, 그리고 768px 높이일때 1vmin은 7.68px이 되고 1vmax는 12px이 됩니다. 너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.

참고 : 당신은 모를 수도 있는 CSS의 7가지 단위 - http://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

* Viewport units 브라우저별 호환성 확인

  - IE11, Edge 에서도 완전하게 지원하지는 않는군요..ㅎㅎ 역시 IE..ㅋ

    그래도 앞으로도 반응형 레이아웃이 대세일테고 많이 사용하게 될 단위가 아닐까 하네요.

    미리미리 공부해둬야겠습니다.

css media query 중 max-aspect-ratio도 보이네요.

media query는 여기에서 상세히 확인해보시기 바랍니다.

확인 > CSS3 media query에 대하여 - http://nuli.navercorp.com/sharing/blog/post/573473

간단한 사용 예제 및 Demo

See the Pen Proportional box covering viewport (mixinized) by Ana Tudor (@thebabydino) on CodePen.