미디어 쿼리(media query) 반응형 사용 예제

media query 예제 및 코드 리뷰

CSS 코드

.box {
    width: 70%;
    margin: 0 auto;
    height: 100px;
    background-color: yellow;
}

/* 1260px~ 의 화면 너비에는 배경색 yellow 적용 */

@media screen and (max-width: 1260px) {
    .box {
        width: 80%;
        background-color: red;
    }
}

/* 768~1260px 의 스크린 너비에는 배경색 red 적용 */

@media screen and (max-width: 768px) {
    .box {
        width: 90%;
        background-color: blue;
    }
}

/* 576~768px 의 스크린 너비에는 배경색 blue 적용 */

@media screen and (max-width: 576px) {
    .box {
        width: 100%;
        background-color: green;
    }
}

/* ~576px 의 스크린 너비에는 배경색 green 적용 */

화면 예시

screen width 1261px~

screen width 769~1260px

screen width 577~768px

screen width ~576px

Comment

1. 많이 사용하는 break point
(물론 기기마다 다 다름)

• PC: 1260
• 태블릿: 768
• 모바일: 576

2. 스크린이 작을수록 width는 채우는 것이 좋다.
위의 예시에서 margin: 0 auto; 좌우 마진을 auto로 설정하여 중앙으로 위치시켰고.
width값을 모바일에서는 100%, 태블릿에서는 90%, PC에서는 80%, 1260이상 스크린에서는 순으로 공백을 줄였다.
화면이 클수록 콘텐츠가 너무 크지않은 것이, 화면이 작을수록 콘텐츠가 크게 보이는 것이 편리하기 때문이다.

3. CSS속성 선언

box라는 클래스 이름을 가진 CSS속성에 새로운 속성을 추가하는 것이 아니라 다시 box라는 CSS속성을 선언을 해준다.