미디어쿼리 사이즈

말씀대로 모바일 사이트가 메인이라면 우선 기본 CSS에서 모바일 디자인을 만들고, 미디어 쿼리로 확장해서 더 큰 해상도의 화면을 만드는게 좋습니다. (이걸 모바일 우선전략이라고도 부른답니다)

기기 크기에 따라 어떻게 처리할건지는 정답이 없는 문제인데요~ 줄넘김 등이 특정 사이즈에서 너무 어색하다면 그 크기에서 한번 더 분기를 해주시는 것도 방법이 될 수 있습니다. 꼭 스마트폰용이라고 미디어쿼리 조건을 하나만 써야하는건 아니니까요~
일단 480px 이하에서 처리하고, 그 다음 추가적으로 320px 이하에서 어색한 부분만 처리해주는 식으로 해주시면 되겠지요!

보통 문단글은 줄넘김이 어디서 되어도 그다지 상관없는 경우가 많기 때문에 그냥 두고, 디자인상 한 줄로 표시되어야 좋은 것들(버튼의 텍스트라든지)은 따로 word-break: keep-all; 설정을 주어서 강제로 줄넘김이 안되게 하기도 합니다.