안녕하세요
반응형 웹을 만들기 위해서는 meta 태그로 viewport를 설정과 함께 미디어 쿼리를 사용합니다.
viewport 의 "width=device-width" 설정은 페이지 넓이를 기기의 스크린 너비로 설정합니다.
넓이는 디바이스 크기로 맞춰졌지만 pc의 넓은 화면의 내용을 모바일의 넓이로 보게 된다면 layout이 답답해 보일 뿐 아니라, 글자가 짤리기도 합니다.
그래서 미디어 쿼리를 사용해 layout 변경, font 크기 조정 등을 처리하게 됩니다.
반응형 웹을 만들 때 손이 많이 가므로 bootstrap을 사용하기도 합니다.
bootstrap 중 css 일부입니다.
/* 기본 container 설정 */
.container-md, .container-sm, .container {
width: 100%;
}
/* 최소 넓이가 768px 이상이면 적용 */
@media (min-width: 768px) {
.container-md, .container-sm, .container {
max-width: 720px;
}
}
/* 최소 넓이가 992px 이상이면 적용 */
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
max-width: 960px;
}
}
/* 최소 넓이가 1200px 이상이면 적용 */
@media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}