반응형 작업할 때 분기점이 항상 헷갈려서 기록하려한다.
반응형 (미디어쿼리) 분기점
뷰포트 설정
뷰포트(viewport)는 웹 페이지를 표시하는 브라우저의 영역을 말합니다. 모바일 기기에서 웹 페이지를 렌더링할 때, 뷰포트는 디바이스의 화면 크기에 맞게 조정되어야 합니다. 이것을 구현하기 위해 뷰포트 메타 태그를 사용합니다.
HTML 문서의 <head> 태그 안에 <meta> 태그를 추가하여 뷰포트를 설정할 수 있습니다. 대부분의 모바일 브라우저는 이 설정을 읽고 웹 페이지를 올바르게 렌더링합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이거 head 안에 추가해야 작동함 ,, ㅇㅇ
분기점
/* pc, 태블릿 가로 (해상도 768px ~ 1023px) */
@media all and (min-width: 768px) and (max-width: 1023px) {
}
/* 태블릿 세로 (해상도 768px ~ 1023px) */
@media all and (min-width: 768px) and (max-width: 1023px) {
}
/* 모바일 가로, 태블릿 세로 (해상도 480px ~ 767px) */
@media all and (min-width: 480px) and (max-width: 767px) {
}
/* 모바일 가로, 태블릿 세로 (해상도 ~ 479px) */
@media all and (max-width: 479px) {
}분기점(부트스트랩 기준)
/* 반응형 */
/* Extra small devices (phones) */
@media only screen and (max-width: 576px) {
}
/* Small devices (tablets) */
@media only screen and (min-width: 576px) and (max-width: 768px) {
}
/* Medium devices (desktops) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
}
/* Large devices (large desktops) */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
}
/* Extra large devices (extra large desktops) */
@media only screen and (min-width: 1200px) {
}
둘 중에 상황에 맞게 쓰면 될 듯..
아무래도 부트스트랩 기준이 더 깔끔하게 반응형이 되지 않을까 싶다.
계속 사용하면서 익혀둬야지
728x90
반응형
