프론트엔드
쪼그라드는 웹페이지
두줄요약
다양한 모바일 화면의 디자인 버그를 줄이기 위해 vw 기반 선형 축소 방식을 적용했습니다. Sass mixin과 CSSO로 스타일 작성 및 미디어쿼리 최적화 방법을 정리했습니다.
문제 상황
- 다양한 모바일 화면 크기별 미디어쿼리 대응에서 텍스트 넘침과 중간 해상도 디자인 버그
- 화면 크기별 QA와 디자이너 협의 증가
해결 방법
- 기준 모바일 화면보다 작은 뷰포트에서 모든 길이를 선형 축소하는 단일 모바일 레이아웃
- px 값을 vw로 변환하는 Sass mixin으로 width·margin·border 등의 수치 속성 일괄 처리
- CSSO의 미디어쿼리 병합으로 반복 생성된 미디어쿼리 최적화
선택 이유
zoom의 Firefox 미지원과 좌표계 차이 문제transform: scale()의 레이아웃 영역·스크롤 크기 미반영 문제rem기반 접근의 WebKit 최소 폰트 크기 제약
주의할 점
- transform·filter처럼 함수 문법을 포함한 속성의 Sass mixin 처리 한계
- 가로 모바일 화면의
zoom: 0.5보정은 Firefox 미지원
