해상도가 1140px 이하일 때의 반응형 처리가 끝났습니다. 이제 나머지 해상도에 따른 CSS 코드를 작성해야 하는데, 이때는 비율만 유지해 주면 됩니다. 해상도가 992px 이하일 때는 미디어 쿼리를 다음과 같이 작성합니다. 992px에서는 메인 영역의 container 클래스 너비와 PortFolio 영역의 본문 너비를 바꾸는 것 말고는 따로 처리할 부분이 없습니다. 다른 영역은 해상도가 992px보다 작아져도 디자인적으로 레이아웃이 달라지지 않기 때문입니다.
13/end/css/media.css - 해상도 992px 이하일 때
@media screen and (max-width:992px){
(중략)
/* 메인 영역 container 기준 너비 변경 */
main .container{
width:768px; /* 992px -> 768px */
}
/* PortFolio 영역 본문 사각형 너비 변경 */
section .portfolio-me .portfolio-inner{
width:100%; /* 48% -> 100% 변경 */
}
}