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
1. 많이 사용하는 break point
(물론 기기마다 다 다름)
2. 스크린이 작을수록 width는 채우는 것이 좋다.
위의 예시에서 margin: 0 auto;
좌우 마진을 auto로 설정하여 중앙으로 위치시켰고.
width값을 모바일에서는 100%, 태블릿에서는 90%, PC에서는 80%, 1260이상 스크린에서는 순으로 공백을 줄였다.
화면이 클수록 콘텐츠가 너무 크지않은 것이, 화면이 작을수록 콘텐츠가 크게 보이는 것이 편리하기 때문이다.
box라는 클래스 이름을 가진 CSS속성에 새로운 속성을 추가하는 것이 아니라 다시 box라는 CSS속성을 선언을 해준다.