[CSS] 중첩된 미디어쿼리(MediaQuery)

if 구문 안에 if 구문을 또 넣을 수 있듯이 MediaQuery 또한 중첩으로 사용이 가능하다.
(마우스로 브라우저의 크기를 이리저리 조정하세요)

Portrait

LandScape

width: 1024이상

width: 1024미만

width: 768미만

height: 1024이상

height: 1024미만

height: 768미만

아래는 현재 작동되고 있는 소스

  .div_40013 { border: 1px solid;}

  @media all and (orientation: portrait) {
    #div_port_0359 {background-color: #FCFFA9; }

    @media all and (min-width: 1024px) {
      #div_width_1024up_0359 {background-color: #FCFFA9; }
    }
    @media all and (max-width: 1023px) {
      #div_width_1024down_0359 {background-color: #FCFFA9; }
    }
    @media all and (max-width: 768px) {
      #div_width_768down_0359 {background-color: #FCFFA9; }
    }

    @media all and (min-height: 1024px) {
      #div_height_1024up_0359 {background-color: #FCFFA9; }
    }
    @media all and (max-height: 1023px) {
      #div_height_1024down_0359 {background-color: #FCFFA9; }
    }
    @media all and (max-height: 768px) {
      #div_height_768down_0359 {background-color: #FCFFA9; }
    }
  }

  @media all and (orientation:landscape) {
    #div_land_0359 {background-color: #FCFFA9; }

    @media all and (min-width: 1024px) {
      #div_width_1024up_0359 {background-color: #FCFFA9; }
    }
    @media all and (max-width: 1023px) {
      #div_width_1024down_0359 {background-color: #FCFFA9; }
    }
    @media all and (max-width: 768px) {
      #div_width_768down_0359 {background-color: #FCFFA9; }
    }

    @media all and (min-height: 1024px) {
      #div_height_1024up_0359 {background-color: #FCFFA9; }
    }
    @media all and (max-height: 1023px) {
      #div_height_1024down_0359 {background-color: #FCFFA9; }
    }
    @media all and (max-height: 768px) {
      #div_height_768down_0359 {background-color: #FCFFA9; }
    }
  }




Portrait

LandScape

width: 1024이상

width: 1024미만

width: 768미만

height: 1024이상

height: 1024미만

height: 768미만

PS.
대부분의 WebBrowser 에서는 상관 없겠지만 모바일 디바이스에서 중첩된 미디어쿼리가 작동하지 않는 문제가 발생해서 원복했다.
확인했던 안되는 디바이스는 다음과 같다.
Android: Honeycomb(3.x) 이하
iOS: 6.x, 4.3