인프런 커뮤니티 질문&답변
작성한 질문수
미디어쿼리 사이즈
작성
·
231
1
안녕하세요? 강의 수강 중 반응형 작업에 용이한
미디어쿼리 부분에 대해 궁금한 부분이 생겨서 글을 남기게 되었습니다~
보통 세~네가지 미디어쿼리 사이즈로 나눠서 작업을 한다고 알고 있는데요.
pc
태블릿
모바일
이라고 가정했을 때
모바일 기반의 사이트에서는 3을 기반으로 먼저 작업을 하고
그다음 2.태블릿, 1. pc 순으로 작업을 하는 게 더 효율적일까요??
그리고, 이 부분이 가장 궁금한 부분인데요,
보통 320px ~ 480px 이 모바일 사이즈라고 알고 있는데,
크롬 개발자모드에서 확인을 해보면 480px 화면에서는 폰트 사이즈가 괜찮은데,
320px 화면에서는 폰트사이즈가 크다보니 줄바꿈이 생기는 경우가 있어서요..
320~480까지의 간격이 꽤나 큰 것 같은데 보통 이럴때는 어떻게 작업하는지 궁금합니다 ㅜㅜ
답변 1
0
말씀대로 모바일 사이트가 메인이라면 우선 기본 CSS에서 모바일 디자인을 만들고, 미디어 쿼리로 확장해서 더 큰 해상도의 화면을 만드는게 좋습니다. (이걸 모바일 우선전략이라고도 부른답니다)
기기 크기에 따라 어떻게 처리할건지는 정답이 없는 문제인데요~ 줄넘김 등이 특정 사이즈에서 너무 어색하다면 그 크기에서 한번 더 분기를 해주시는 것도 방법이 될 수 있습니다. 꼭 스마트폰용이라고 미디어쿼리 조건을 하나만 써야하는건 아니니까요~
일단 480px 이하에서 처리하고, 그 다음 추가적으로 320px 이하에서 어색한 부분만 처리해주는 식으로 해주시면 되겠지요!
보통 문단글은 줄넘김이 어디서 되어도 그다지 상관없는 경우가 많기 때문에 그냥 두고, 디자인상 한 줄로 표시되어야 좋은 것들(버튼의 텍스트라든지)은 따로 word-break: keep-all; 설정을 주어서 강제로 줄넘김이 안되게 하기도 합니다.