@media all and (max-width: 1024px){
//브라우저 창 width가 1024px보다 작아지는 순간부터 적용
//태블릿
}
@media all and (max-width: 768px){
//브라우저 창 width가 768px보다 작아지는 순간부터 적용
//모바일
}
@media all and (min-width: 768px){
//브라우저 창 width가 768px보다 커지는 순간부터 적용
//태블릿
}
@media all and (min-width: 1024px){
//브라우저 창 width가 1024px보다 커지는 순간부터 적용
//데스크탑
}
.box{
width: 1000px;
height: 800px;
background-color: red;
}
@media all and(max-width: 960px){
.box{
width: 700px;
background-color: blue;
}
}
@media all and(max-width: 480px){
.box{
width: 300px;
height: 400px;
}
}<body>
<div class="box">box</div>
</body>
화면 넓이가 960px일 경우 박스의 넓이가 줄어들고 배경색이 파란색으로 바뀐다.
높이는 800px이 그대로 적용되고 있음을 알 수 있다.
넓이가 480px보다 작아지면 넓이는 300px로 줄고 높이도 400px로 줄어든다.
배경색은 파란색이 유지되고 있다.
이처럼 미디어 쿼리에는 화면 넓이에 따라 바꿔야 할 css속성만 적어주면 이전에 설정한 값들은 그대로 적용됨을 알 수 있다. 화면 크기에 따라 미디어 쿼리를 오름차순, 혹은 내림차순으로 나열해 변경되는 요소들을 잘 작성해야 한다.
실무에서는 모바일 화면을 먼저 구현하고 데스크탑 화면으로 확장시키는 순으로 작업
댓글