Wulin.com의 기사 소개 (www.vevb.com) : 반응 형 웹 디자인.
3G의 인기로 점점 더 많은 사람들이 휴대 전화를 사용하여 인터넷을 서핑합니다.
모바일 장치는 데스크탑 장치를 능가하고 인터넷에 액세스하는 가장 일반적인 터미널이되었습니다. 따라서 웹 디자이너는 어려운 문제에 직면해야합니다. 어떻게 다양한 크기의 장치에 동일한 웹 페이지를 제시 할 수 있습니까?
휴대 전화의 화면은 비교적 작으며 일반적으로 600 픽셀 미만입니다. PC의 화면 너비는 일반적으로 1,000 픽셀 이상입니다 (현재 주류 너비는 1,366 × 768). 다양한 크기의 화면에서 만족스러운 결과를 얻는 것은 쉽지 않습니다.
많은 웹 사이트에 대한 솔루션은 모바일 버전 또는 iPhone/iPad 버전 제공과 같은 다른 장치에 다른 웹 페이지를 제공하는 것입니다. 이것은 효과를 보장하지만 매우 번거 롭습니다. 여러 버전의 유지 관리가 필요합니다. 또한 웹 사이트에 여러 포털이있는 경우 아키텍처 설계의 복잡성을 크게 증가시킵니다.
따라서 일부 사람들은 한 번에 설계 할 수 있고 일반적으로 동일한 웹 페이지에 일반적으로 다른 크기의 화면에 자동으로 적응할 수 있는지 오랫동안 상상했으며 화면 너비에 따라 레이아웃을 자동으로 조정 했습니까?
1. 적응 형 웹 디자인의 개념
2010 년 Ethan Marcotte는 반응 형 웹 디자인이라는 용어를 제안했는데, 이는 화면 너비를 자동으로 인식하고 해당 조정을 할 수있는 웹 디자인을 나타냅니다.
그는 Sherlock Holmes의 모험의 6 명의 주인공의 초상화의 예를 만들었습니다. 화면 너비가 1300 픽셀보다 큰 경우 6 장의 사진이 나란히 연속됩니다.
화면 너비가 600 픽셀과 1300 픽셀 사이 인 경우 6 개의 그림은 두 줄로 나뉩니다.
화면 너비가 400 픽셀과 600 픽셀 사이 인 경우 탐색 막대가 페이지 헤드로 이동합니다.
화면 너비가 400 픽셀 미만인 경우 6 개의 사진이 3 줄로 나뉩니다.
Mediaqueri.es에는 위의 더 많은 예가 있습니다.
여기에는 테스트 위젯이 있으며 웹 페이지에서 다른 해상도가 다른 화면의 테스트 효과를 동시에 표시 할 수 있습니다. 설치하는 것이 좋습니다.