반응형
@media (min-width: 768px) {
.visible-on-md-up {
display: block;
}
}-> 최소 768px 이상일 때 display: block;
min-width, max-width 활용하기
css는 깨지는 부분만 다시 수정하면 된다.
@media ( max-width: 1440px ) {}
@media ( max-width: 768px ) {}
@media ( max-width: 375px ) {}
사이즈 참고
모바일 퍼스트 (min-width)
- 기본 스타일을 모바일 기준으로 작성
- 화면이 커지면 min-width 미디어쿼리로 점진적 레이아웃 확장
- 작은화면 -> 큰 화면 순서로 스타일 적용
- 현대 트렌드, 유지보수 용이
데스크탑 퍼스트 (max-width)
- 기본 스타일을 데스크탑 기준으로 작성
- 화면이 작아지면 max-width 미디어쿼리로 조정
- 큰 화면 -> 작은화면 순서로 스타일 적용
- 레거시 코드, 데스크탑 우선 디자인
