마지막으로 400px일 때는 container 클래스의 기준 너비만 바꾸면 메인 영역의 글자 비율이 줄어들어도 현재 해상도에서는 큰 편이어서 font-size 속성을 기존보다 조금 작게 재설정합니다.
13/end/css/media.css - 해상도 400px 이하일 때
@media screen and (max-width:400px){
(중략)
main .container{
width:320px; /* 400px -> 320px */
}
section .container{
width:320px; /* 360px -> 320px */
}
main h4{
font-size:1.5rem;
}
section .title h2{
font-size:3rem; /* 3.5rem -> 3rem */
}
}