[CSS] Chapter 13. 브라우저 크기마다 CSS가 바뀌는 Media Query

css

닫기 줄바꿈

.box {
​​width: 100%;
​​height: 100px;
​​border: 4px solid red;
}

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

// 테블릿 화면
@media screen and (max-width: 768px) {
​​.box {
​​​​width: 80%;
​​​​background-color: blue;
​​}
}

// 모바일 브라우저
@media screen and (max-width: 576px) {
​​.box {
​​​​background-color: greend;
​​}
}

media query는 css 맨 마지막에 사용된다.

왜 그러느냐? css는 맨 마지막에 있는 것들이 적용되기 때문에.