Media Query

soonniee·2021년 4월 8일

목록 보기

1/1

PC 뿐만 아니라 모바일, 태블릿 등 사용자의 디바이스에 따라서 웹페이지 화면을 적절하게 구성하는 것은 필수적이다.

Media Query.

기본 미디어 쿼리 구문.

Media types

all : All media devices.

print : print preview.

screen : Computer screen, smartphone, etc.

speech : screen readers that read the screen loud.

Media feature

- Width, Max-width, Min-width

//너비가 정확히 600px

 @media screen and (width: 600px) {
    body {
        color: red;
    }
}

//max-width, min-width 
// 최소값, 최대값 범위 지정 가능

@media screen and (max-width: 600px) {
    body {
        color: blue;
    }
}

// min-width 와 max-width 결합하여 범위 지정

@media (min-width: 350px) and (max-width: 800px) {
  body {
    background-color: purple;
  }
}

- Orientation

//가로방향
 @media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

 //세로방향
 @media (orientation: portrait) {
    body {
        color: rebeccapurple;
    }
}

Operators

// 너비가 400px 이상 & 가로 모드
@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

 //너비가 400px 이상 or 가로 모드
 (콤마로 구분)
 @media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

// 오직 세로모드
@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

Viewport.

Viewport란 모바일에서 Web Content를 출력하는 영역

웹페이지의 너비, 높이 및 확대/ 축소 설정이 가능

사용법 : < head > 태그 내부의 < meta > 태그로 사용

  <meta name="viewport" content = "width=device-width,
  	initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

- width / height : viewport의 너비 / 높이

: width = device-width 로 설정시 device의 적정 너비로 자동 설정됨.

- initial-scale : 초기 배율 설정

- minimum-scale / maximum-scale : 최소 축소 / 최대 확대 비율 설정

- user-scalabe : 확대 및 축소 가능 여부 설정

soonniee