반응형과 적응형

반응형 웹과 적응형 웹의 차이

반응형 디자인

가로 크기에 변화를 줄 때, 콘텐츠들이 웹 브라우저의 가로 사이즈에 맞춰 유동적으로 재배치되는 형태

일반적으로 반응형 웹은 % 단위를 사용하여 각 디자인의 폭에 유동적으로 반응하여 콘텐츠의 크기가 줄거나 커지고 오브젝트 배열도 변경된다. 웹브라우저의 가로 넓이에 따라 유동적으로 변하는 유동형 레이아웃과 유연한 이미지, 그리고 미디어 쿼리가 어우러져 환경에 반응하여 스스로 적응하는 방식. 적응형 웹과 눈으로 확인했을때 가장 큰 차이점은 창을 줄일 때 애니메이션 비율이 줄어드는 것이 보인다는 것.

적응형 디자인

사용자가 브라우저의 가로 크기를 변경해서 디자이너가 지정한 해상도에 도달하면 레이아웃이 재배치되는 형태

px 단위를 사용하며 몇 개의 해상도를 지정하여 css 코딩시 브라우저가 그 사이즈에 도달하면 그때 디자이너가 준비해둔 레이아웃을 보여준다.

뷰를 정해둔 상태에서 고정폭, 위치, 디자인들이 기준이 되는 넓이 값을 만났을때 적용되므로 각각의 해상도마다 레이아웃이 달라진다.

정리

반응형
콘텐츠의 정렬만 바뀌면서 모바일에 도착한다면 반응형

브라우저 크기가 변동될때 콘텐츠가 변하는 장면을 끝까지 버퍼링 없이 시청 가능하다면 반응형

적응형
레이아웃이 바뀌면서 모바일에 도착한다면 적응형
브라우저 크기가 변동하며 콘텐츠가 변할때 중간중간 끊김이 생기는 버퍼링을 목격한다면 적응형