반응형웹 미디어쿼리 예제

미디어쿼리 예제 

화면너비에 따라서 다른 CSS 적용하기

@media [only 또는 not] [미디어유형] [and 또는 ,(콤마)] (조건문){실행문}

css

@charset "utf-8";

/** 전체박스 */
#wrap {
    width: 90%;
    height: 500px;
    margin: 0 auto;
    border: 4px solid #00f;
}

/* min - 크기가 작은순서대로 작성, max - 크기가 큰순서대로 작성 */
/* all : 모든장치 (default) */
/* 너비가 320px 이상일때 */
@media all and (min-width:320px){
    #wrap {
        width: 30%;
        background: #00d2a5;
    }
}
/* 너비가 600px 이상일때 */
@media all and (min-width:600px){
    #wrap {
        width: 60%;
        background: #40b0f9;
    }
}
/* 너비가 1024px 이상일때 */
@media all and (min-width:1024px){
    #wrap {
        width: 90%;
        background: #f45750;
    }
}

결과