미디어 쿼리가 적용되지 않는 원인은, @media(max-width:900px) 뒤에 오는 동일 명시도 규칙

스마트폰용 @media로 1열로 되돌렸어야 할 요금 영역이, 너비를 줄이면 글자가 한 글자씩 세로로 쪼개졌다. 원인은 CSS 명시도가 같은 지정을 @media 블록보다 뒤에 작성했기 때문에, 소스의 "나중에 쓴 쪽이 이긴다" 규칙으로 @media 쪽 지정이 통째로 무효화된 것이다. @media를 <style> 맨 끝으로 옮기는 것만으로 해결된 실제 사례.

결론

CSS 명시도가 같은 경우, @media 안쪽에 작성했는지 바깥쪽에 작성했는지는 우선순위에 영향을 주지 않는다. 소스 코드상에서 나중에 작성된 지정이 그대로 이긴다. 실제로 겪은 상황은, 요금 섹션의 제목 레이블을 "PC는 2열, 스마트폰은 1열"로 구성한 컴포넌트에서, 스마트폰용 1열 지정을 @media (max-width: 900px) 안에 작성했으나, 같은 셀렉터·같은 명시도의 기본 규칙(2열 지정)이 파일 뒤쪽에 배치되어 있었기 때문에, 스마트폰의 좁은 화면에서도 2열인 채로 렌더링되어, 좁은 열에 억지로 들어간 제목 글자가 한 글자씩 세로로 접혀 쪼개졌다. 수정 방법은 @media 블록을 <style> 맨 끝(모든 기본 규칙보다 뒤)으로 이동하는 것뿐이며, CSS 값 자체는 한 글자도 변경하지 않았다.

전문

절차의 자세한 설명·확인 방법·자주 묻는 질문은 원본 글에 정리되어 있습니다.

→ 미디어 쿼리가 적용되지 않는 원인은, @media(max-width:900px) 뒤에 오는 동일 명시도 규칙｜Rebounder Tech Blog