[css] @media, Media Queries

사용법

@media not|only mediatype and (expressions) {
    /* CSS-Code; */
}

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">

CSS3 Media Types

all / print / screen / speech

example

/* 기본 스타일 지정 */
body {
    background-color: lightgray;
}

/* 400px 이상일 때 적용 */
@media screen and (min-width: 400px) {
    body {
        background-color: lightpink;
    }
}

/* 400px 이하일 때 적용 */
@media screen and (max-width: 400px) {
    body {
        background-color: lightpink;
    }
}

/* 400px ~ 600px 사이일 때 적용 */
@media screen and (min-width: 400px) and (max-width: 600px) {
    body {
        background-color: lightpink;
    }
}