모바일 기기와 웹 디자인

1. 뷰포트

화면에서 실제 내용이 표시되는 영역

2) 뷰포트 지정하기

<meta name="viewport" content="<속성1=값>, <속성2=값2>, ...">

• width : device-width
• height : device-hight
• user-scalable : yes -> 축소, 확대 조작가능
• initial-scale : 처음 로딩시 화면 배율
• minimum-scale : 축소 가능 배율 예) 0.5 -> 1/2축소
• maximum-scale : 확대 가능 배율 예) 3 -> 3배까지 확대가능

2. 미디어 쿼리

사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해 줍니다

1) 미디어 쿼리 구문

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

너비가 200px이상, 360px이하일 때 
@media screen and (min-width: 200px) and (max-width: 360px) {}

- 뷰포트의 너비가 600px 이상이고 959px 이하일 때
@media all (min-width: 600px) and (max-width: 959px)

2) 미디어 쿼리의 조건

• width, height
• min-width, min-height
• max-width, max-height
• orientation : 장비방향
  - portrait : 세로
  - landscape : 가로

/*가로모드일대 배경색변경*/
@media screen and (orientation : landscape) {
                body{
                    background: grey;
                }
            }

3. 미디어 쿼리 적용하기
   1) 태그 사용하기

2) @import 구문 사용하기

• @import url(css 파일 경로) 미디어 쿼리 조건
• @import url("css/table.css") screen and (min-width: 321px) and (max-width: 768px);

3) 웹 문서에서 직접 정의하기

@media screen and (max-width: 320px) {
body {
background-color: orange;
}
}