저는 최근에 화면 해상도와 유동적인 폭의 웹사이트를 사용하는 것이 어떻게 모든 방문객들의 화면 해상도를 수용할 수 있는 가장 좋은 방법인지에 대해 많이 생각해 보았습니다. 정적인 폭의 대안 웹사이트는 선택을 해야 합니다. 가장 낮은 공통분모인 800px 너비에 최적화하고 더 큰 화면을 가진 사용자의 경우 수백 픽셀의 너비를 사용할 수 없습니다. 또는 1024px에 맞게 최적화하고 방문자 800px를 수평 스크롤만 할 수 있습니다. 내 생각에 1024px보다 큰 것은 정적 너비 사이트에는 무리이다.
가장 좋은 시나리오는 모두를 수용할 수 있는 유동적인 폭의 사이트를 만드는 것이라고 생각합니다. 다음은 "완벽한" 유체 폭 레이아웃입니다.
- 모든 주요 브라우저에서 작동
- 780px로 축소
수평 스크롤 없이 800×600 해상도의 사용자를 수용할 수 있습니다! - 1260px까지 증가
이 제품은 1280×768 해상도와 그 사이의 모든 것을 수용합니다. - 이것은 모든 인터넷 사용자의 90% 이상을 수용한다. 이 레이아웃을 쉽게 더 크게 만들 수 있지만 줄 길이가 가독성에 미치는 영향에 유의하십시오. 아무도 1980px 길이의 한 줄의 텍스트를 읽고 싶어하지 않는다.
- 사이드바는 주요 내용과 "높이가 같다"
- 페이지 내용은 해상도가 훨씬 높은 사용자를 위해 중앙에 배치됩니다.
난 일을 시작했는데, 넌 모를거야, 난 알 것 같아 =)
저는 그것을 "완벽하다"고 부르는데 상당히 긴장됩니다. 왜냐하면 저는 몇몇 천재들이 그것에 구멍을 내고 몇 가지 일에 대해 저를 부를 것이라고 확신하기 때문입니다. 괜찮아요, 그렇게 됐으면 좋겠어요. 제가 할 수 있는 한 수준까지 최선을 다해야 할 일이거든요. 파이어폭스, 사파리, 오페라, 그리고 인터넷 익스플로러 6에서 테스트해봤는데, 이 모든 것들에서 작동하더군요. 그래서 행운을 빌며 이 글을 올리려고 합니다. 언제나처럼 자유롭게 다운로드하고 원하는 것을 하세요. 링크는 항상 멋집니다.
[라이브 예시]
[다운로드 예제]
'css' 카테고리의 다른 글
CSS3 아이디어: 페이지 요소의 회전 (0) | 2021.09.28 |
---|---|
GIF를 이용한 페이지 요소의 미묘한 애니메이션 (0) | 2021.09.28 |
유체 폭 및 부유 물체 가능성 (0) | 2021.09.28 |
블루 플로이버 헤더 설계 기법 (0) | 2021.09.28 |
다중 원격 링크: 예제 및 사용 방법 (0) | 2021.09.28 |
댓글