it-gundan.com

고정 폭 대 동적 폭

브라우저의 크기를 조정하면 페이지의 구성 요소가 함께 "스크래치"되는 유연한 레이아웃과 달리 브라우저 창의 크기를 조정하면 스크롤 막대가 표시되는 고정 너비 레이아웃으로 점점 더 많은 사이트가 나타났습니다. .
이와 같은 StackExchange 사이트는 고정 레이아웃의 예입니다. 유연한 레이아웃의 예로는 Gmail과 iGoogle이 있습니다. 다른 것을 선택하는 이유는 무엇입니까?

15
BenV

가변 폭 레이아웃에서는 복잡한 디자인을 구현하기가 매우 어려울 수 있습니다. 그래서 나는 그것이 역할을한다고 상상합니다.

매우 넓은 텍스트를 읽는 것이 불편하다는 사실도 있습니다. StackExchange 사이트의 열 크기는 매우 관리하기 쉽고 읽기 쉽습니다. 가변 너비 레이아웃을 사용하면 읽을 수 없게되지 않고 본문 전체를 확장 할 수 없습니다. Google조차도 검색 결과의 너비를 제한합니다.

물론 Google 문서 및 Google지도와 같이 공간이 부족한 사이트가 있다면 사용 가능한 모든 공간을 사용하기 위해 가변 너비 구성표를 사용하고 싶습니다.

11
Kris

복잡한 사이트에서 개발자가 훨씬 쉽게 수정했습니다. 또한 대부분의 고정 너비 사이트의 너비는 약 1000 픽셀입니다. 그 이유는 브라우저의 1 %만이 800x640을 사용하고 0 %는 640x480을 사용하기 때문입니다. 최신 통계를 확인하십시오 here . 모바일은 포함되지 않습니다. 완전히 다른 볼 게임입니다.

가변 너비 레이아웃의 가치는 사람들이 최대화되지 않은 창에서 웹 사이트를 쉽게 사용할 수 있다는 것입니다.

청중을보고 원하는 경험과 가변 폭이 필요한 경우 개발할 수없는 다른 기능보다 가변 폭이 더 중요한지에 따라 결정해야합니다.

8
Ben Hoffman

CSS를 사용하여 최소 너비와 최대 너비를 설정 한 다음 백분율 너비를 사용하여 나머지를 두 극단 사이에 흐르게하는 두 가지 사이에 타협이 있습니다. 예를 들어 왼쪽 메뉴 열이 200px보다 좁지 않고 주요 내용이 흐르도록 할 수 있습니다. 이 기술을 사용하면 매우 높은 해상도 나 매우 낮은 해상도를 보지 않고도 사이트를 방문자 해상도로 확장 할 수 있습니다. 결국 HTML은 흐름에 맞게 디자인되었습니다. 이는 마크 업 언어이며 인쇄와는 다릅니다.

이 방법은 블로그 나 텍스트 정보가 많은 디자인과 같이 비교적 단순한 디자인에 적합합니다. 실제로, 나는 그것을 내 자신의 개인 웹 사이트 에서 사용합니다. 많은 사람들이 이제 와이드 스크린 또는 고해상도 모니터를 가지고 있습니다. 제 작업 모니터의 너비는 1680px입니다. 왜 큰 부동산을 잃고 디자이너가 자신에게 적합한 고정 너비를 결정했기 때문에 가로로 스크롤해야합니까? 화면? 결국 좋은 디자인은 사용자에게 최상의 경험을 제공하는 것입니다. 디자이너의 모니터에서 "예쁘게"보이는 것만이 아닙니다.

3
Dan Diplo

Jakob Nielsen 에 따르면 113 홈페이지 사용을위한 디자인 지침 :

67 액체 레이아웃을 사용하여 홈페이지 크기가 다른 화면 해상도로 조정되도록하십시오.

또한 10 개의 가장 위반 된 홈페이지 디자인 가이드 라인 :

얼어 붙은 레이아웃과 싸우는 것은 잃어버린 전투처럼 보이지만 반복 할 가치가 있습니다. 사용자마다 모니터 크기가 다릅니다. 큰 모니터를 사용하는 사람들은 브라우저의 크기를 조정하여 여러 창을 동시에 볼 수 있기를 원합니다. 모든 사람의 창 너비가 800 픽셀이라고 가정 할 수는 없습니다. 일부 사용자에게는 너무 많고 다른 사용자에게는 너무 적습니다.

1
melhosseiny

선택하지 않아도됩니다. A List Apart 는 뛰어난 Responsive Design의 기사 를 갖습니다. 주요 아이디어는 미디어 쿼리 를 사용하여 브라우저 창 또는 뷰포트 크기의 변경 사항을 포착하고 필요에 따라 CSS를 다시 할당 할 수 있다는 것입니다. 거기에 읽을 것이 많으므로 모든 수분이 많은 세부 사항은 기사 를 확인하십시오. 그러나 그것의 길고 짧은 (또는 그것의 "넓고 좁은"이어야합니까?) 그들의 예에서 beforeafter 페이지를보십시오. before 페이지는 어느 정도까지 확장 할 수 있지만 충분히 좁 히면 약간 어수선 해집니다. after 페이지 크기도 조정되지만 크기를 조정하기에 너무 좁 으면 레이아웃이 변경됩니다.

1
Alan

믹스 업은 어떻습니까? 공간이 충분하면 # content-section을 고정 너비 (70em)로 표시합니다. 그렇지 않으면 섹션이 뷰포트/브라우저 창의 80 %로 축소됩니다.

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }
0
feeela

동적 레이아웃의 장점은 모바일 장치를 포함한 모든 화면 크기에서 작동한다는 것입니다. 모든 크기에서보기 좋게 만드는 것이 더 어렵습니다. 질문은 방문자가 휴대 기기를 사용할 것입니까?입니다.

0
paulmorriss