CSS: 반응형 웹 디자인을 위한 단위

단위
설명


여자 이름
글꼴 크기와 같은 인쇄 속성의 경우 부모의 글꼴 크기, 너비와 같은 다른 속성의 경우 요소 자체의 글꼴 크기입니다.

전-
요소 글꼴의 x 높이입니다.

채널
요소 글꼴의 상형 문자 "0"의 사전 측정값(너비)입니다.

렘
루트 요소의 글꼴 크기입니다.

ㅋ
요소의 줄 높이입니다.

폭스바겐
뷰포트 너비의 1%입니다.

vh
뷰포트 높이의 1%입니다.

VM
뷰포트의 작은 치수의 1%입니다.

vmax
뷰포트의 더 큰 치수의 1%입니다.


calc() 혼합

when to use which?
경험에 따르면 여백이나 패딩이 해당 요소와 관련된 경우 em이어야 합니다. 글로벌 크기라면 rem이어야 합니다.

미디어 쿼리

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

  //CSS

}

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {

  //CSS

}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

  //CSS

}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

  //CSS

}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

  //CSS

}