Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용"에 대해 공유드리려고 합니다.

CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용

1안 : Mobile → Tablet → PC
PC의 모든 브라우저가 미디어쿼리를 지원하지 않음에 따라, 미디어쿼리를 지원하지 않는 IE 6~8 에서는 모바일 화면이 기본으로 노출되버림.
해결책은 다음과 같음.
  • 모바일용 CSS 코드를 먼저 작성하고 미디어쿼리로 감싸지 않음.
  • IE 6~8 을 위한 JS 라이브러리
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. 모바일 (뷰포트너비 640px 미만) */
    .sample {background-color:black}
     
    /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 640ox 이상) */
    @media all and (min-width:640px) {
        .sample {background-color:red}
    }
     
    /* 4. PC (해상도 1024px 이상) */
    @media all and (min-width:1024px) {
        .sample {background-color:green}
    }
    • 디자인에 따라 미디어쿼리 분기점은 조정 가능.
  • IE 6~8 을 위한 JS 라이브러리
    < head>
    <!--[if lt IE 9]>
    	<script type="text/javascript" src="respond.min.js"></script>
    <![endif]-->
    < /head>
     
    <!-- respond.min.js 라이브러리를 사용하면 IE 6~8 브라우저도 미디어쿼리를 해석할 수 있다. (라이센스: MIT.) -->>
    • ie 6~8 Media Queries 대응을 위한 스크립트 - https://github.com/scottjehl/Respond/
    • respond.min.js 유의사항
      • 로컬 환경에서 동작하지 않음.
      • 미디어쿼리 작성시 all and 키워드를 생략하면 동작하지 않음.
        @media all and (조건문){실행문}
    • 페이지가 무거운 경우 미디어쿼리 구문 안쪽 코드가 늦게 표시되어 IE 6~8 브라우저에서 모바일 화면이 잠깐 노출될 수 있음.
2안 : Mobile 세로(Portrait) → Mobile 가로(Landscape) → Tablet 세로(Portrait) → Tablet 가로(Landscape) → PC
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
    .sample {background-color:black}
     
    /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
    @media all and (min-width:640px) and (orientation:landscape){
        .sample {background-color:green}
    }
     
    /* 4. Tablet 세로(Portrait) (해상도 768x 이상) */
    @media all and (min-width:768px) and (orientation:portrait){
        .sample {background-color:red}
    }
     
    /* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
    @media all and (min-width:1024px) and (orientation:landscape){
        .sample {background-color:blue}
    }
     
    /* 6. PC (해상도 1025px 이상) */
    @media all and (min-width:1025px){
        .sample {background-color:yellow}
    }
주의사항
해상도 1024px 이하인 PC화면에서는 Tablet화면이 노출된다.
이를 방지하고자 UA(userAgent)값으로 PC화면에서 Tablet화면이 노출이 안되게 작업합니다.
/* 4. Tablet 세로(Landscape) (해상도 768x 이상) */
@media all and (min-width:768px) and (orientation:portrait){
    html:not(.pc) .sample {background-color:red}
}
 
/* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
@media all and (min-width:1024px) and (orientation:landscape){
    html:not(.pc) .sample {background-color:blue}
}
						
3안 : PC → Tablet → Mobile
미디어쿼리를 지원하지 않는 IE 6~8 에서도 PC 화면이 기본으로 보이므로 문제되지 않습니다.
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. PC (해상도 1024px 이상) */
    .sample {background-color:black}
     
    /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 1024px 이하) */
    @media all and (max-width:1024px) {
        .sample {background-color:red}
    }
     
    /* 4. 모바일 (해상도 640px 이하) */
    @media all and (max-width:640px) {
        .sample {background-color:green}
    }
4안 : Mobile 세로(Portrait) → Mobile 가로(Landscape)
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
    .sample {background-color:black}
     
    /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
    @media only screen and (min-width :640px) {
        .sample {background-color:green}
    }

지금까지 반응형웹 대해 살펴봤습니다.
이후 새로운 주제로 찾아뵙도록 하겠습니다.
감사합니다.


by. UI개발팀 smoothie




'지식공유 > 웹표준기술' 카테고리의 다른 글

웹폰트 (Web Font)  (172) 2016.10.31
flexbox  (3) 2016.09.30
반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

전체 댓글