미디어쿼리 예제 화면너비에 따라서 다른 CSS 적용

미디어쿼리 예제 

화면너비에 맞춰 다른 CSS 적용

@charset "utf-8";

/** 전체박스 */

#wrap {

    width: 80%;

    height: 600px;

    margin: 0 auto;

    border: 10px solid #ffff00;

}

/* min - 크기가 작은순서대로 작성, max - 크기가 큰순서대로 작성 */

/* all : 모든장치 (default) */

/* 너비가 320px 이상일때 */

@media all and (min-width:320px){

    #wrap {

        width: 40%;

        background: #000;

    }

}

/* 너비가 600px 이상일때 */

@media all and (min-width:600px){

    #wrap {

        width: 60%;

        background: #40b0f9;

    }

}

/* 너비가 1024px 이상일때 */

@media all and (min-width:1024px){

    #wrap {

        width: 90%;

        background: #f45750;

    }

}