media query

목차

• media query

---

 media qurey

접속하는 디바이스나 뷰포트에 따라 특정 CSS스타일을 사용하는 방법

중단점(breakpoint)에서 어떤 CSS스타일을 적용할것인지 지정

 

ex)

@media url(경로) (only | not) 미디어 유형 and (조건) and (조건)

url(경로) : css파일을 지정함

only : 미디어쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않음

not :not 다음에 지정하는 미디어 유형을 제외함

and : 조건을 여러개 연결해서 추가할 수 있음

 

미디어 유형

screen : 주로 화면이 대상임

all : 모든 장치에 적합함

print : 인쇄 결과물 및 출력 미리보기 화면에 표시중인 문서

speech : 음성 합성장치 대상

 

미디어 쿼리 조건

min-width : viewport의 최소 너비

max-width : viewport의 최대 너비

~600px

601px ~ 800px

801px ~

@import url('./~600px.css') screen and (max-width: 600px);
@import url('./601~800px.css') screen and (min-width: 601px) and (max-width: 800px);
@import url('./801px~.css') screen and (min-width: 801px);

/* ~600px.css */
p {
    background-color: red;
}

/* 601~800px.css */
p {
    background-color: blue;
}

/* 801px~.css */
p {
    background-color: green;
}

---

 

Github

Link