Responsive Web 을 위해서 반드시 알아둬야 하는 필수적인 기능이다.
① HTML <head>
태그에 meta 태그를 이용해서 유저가 현재 보고있는 디바이스의 width를 맞추는 작업이 필요하다.
<head>
<meata name="viewport" content="width=device-width">
</head>
② CSS에 media query 작성하기
@media screen and (min-width: 768px) {
/* css 스타일 선언 */
}
@media screen and (min-width: 576) and (max-width: 767px) {
/* css 스타일 선언 */
}
☁️ screen
자리에는 speech | print | all 이 들어갈 수 있다.
☁️ and
자리에는 not | only | ,(comma) 가 들어갈 수 있다.
③ 디바이스 별 사이즈 (참고)
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/