홈페이지는 PC, 스마트폰, 태블릿등 어떤 기기에서 보느냐에 따라 홈페이지 구성이 변화 되도록 제작 할 수 있습니다.

즉, 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹 페이지를 반응형 홈페이지라 합니다.

해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다.

예전에는 PC버전, 모바일버전에 따라 홈페이지를 각각 만들기도 했습니다. 하지만 스마트폰은 새로운것이 계속 나오고 그때마다 대응을 한다는 것이 어렵기 때문에 반응형 홈페이지가 필요하게 된것입니다. PC버전, 모바일버전 구분 없이 하나의 사이트를 만들어 해상도에 따라서 레이아웃, 콘텐츠가 자동으로 변경되어 모바일 버전을 따로 제작관리할 필요가 없습니다.

즉, 모바일 기기의 해상도를 고려하여 적절히 CSS를 수정하거나 추가하는 것이 가능합니다.

해상도(화면의 크기) 600 픽셀 미만일 경우

@media screen and (max-width:600px) {

#article {font-size:1.25em; background:#fff; color:#000;}

}

해상도(화면의 크기) 601픽셀과 800픽셀 사이일 경우

@media all and (min-width:601px) and (max-width:800px) {

#article {background:#000;}

}

해상도(화면의 크기) 1200픽셀 이상일 경우

@media screen and (min-width:1200px) {

#article {font-size:1.25em; background:#fff; color:#000;}

}

각각에 따라 화면의 구성을 변하게 해서  보이도록 하자는 것이 반응형 홈페이지입니다.