미디어 쿼리 (Media Query) 와 Viewport

👋 반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport

안녕하세요 TriplexLab 입니다.
오늘은 미디어 쿼리를 사용할때 max-width와 min-width의 차이점에 대해서 말씀드릴게요.

/**
    반응형 만들때
    min-width기준으로 css 작성하는 기준을 설명합니다.
    min-width는 모바일의 해상도가 가장 우선으로 읽혀야 합니다.
*/

/** 모바일의 해상도 기준 */
@media screen and (min-width: 320px){
    .bg1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
}

/** 테블릿 해상도 기준 */
@media screen and (min-width: 768px){
    .bg1 {
        background-color: blue;
    }   
}

 

/**
    반응형 만들때
    max-width기준으로 css 작성하는 기준을 설명합니다.
    max-width는 데스트탑 PC해상도가 가장 우선으로 읽혀야 합니다.
*/

/** 데스트탑 PC 해상도 기준 */
@media screen and (max-width: 1920px){
    .bg1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
}

/** 테블릿 해상도 기준 */
@media screen and (max-width: 768px){
    .bg1 {
        background-color: blue;
    }   
}