문제

순전히 사용성 관점에서이 질문을하고 있습니다. 브라우저 창 크기를 조정할 때 웹 사이트가보기 영역을 채우기 위해 확장 / 확대되어야합니까?

확실한 단점이 있음을 확실히 알고 있습니다.

  • 넓은 열의 텍스트를 읽기 어렵습니다.
  • 퍼센트를 사용하여 html / css를 작성하는 것은 어려울 수 있습니다.
  • 이미지가 너무 넓거나 너무 긴 텍스트 블록이 추가되면 디자인이 한계를 넘어서 확장 될 수 있습니다. (html / css를 코딩하는 것은 고통 스럽다)

    내가 생각할 수있는 유일한 장점은 브라우저에 내장 된 글꼴 크기 조정을 사용하는 사용자가 양쪽에 공백이있는 몇 단어 길이의 열을 처리 할 필요가 없다는 것입니다. 그러나 그것은 무엇보다 브라우저 문제라고 생각합니다 (Firefox 3를 사용하면 항상 편리하게 사용할 수있는 텍스트 대신 모든 항목 을 확대 / 축소 할 수 있습니다)

    수정 : 스택 오버플로가 고정 된 너비이지만 코딩 공포의 크기가 조정됩니다. Jeff는 어느 쪽이든 강한 선호도가없는 것 같습니다.

도움이 되었습니까?

해결책

원시 HTML이 바로 그 역할을합니다.임의의 크기 창에서 잘 렌더링되지 않도록 데이터를 변경하고 있습니까?

예전에는 누구나 VGA 화면을 사용했습니다.이제 그 해상도는 가장 드문 경우입니다.앞으로 어떤 결의안이 흔해 질지 누가 알겠습니까?그리고 특정 최소 너비 또는 높이를 예상하는 이유는 무엇입니까?

유용성 관점에서 사용자에게 특정 해상도를 요구하는 것은 해당 해상도를 사용하지 않는 사람에게는 성능 저하를 초래할뿐입니다.이것에서 오는 또 다른 것은 고정 너비 무엇입니까?내 글꼴이 디자이너의 글꼴과 다르기 때문에 제대로 렌더링되지 않는 고정 크기 창 (팝업)을 많이 보았습니다.

다른 팁

웹 사이트 확장 측면에서 저는 브라우저 "확대 / 축소"기능을 사용하여 잘 확장되는 고정 크기 웹 사이트를 좋아합니다.1920 해상도 모니터에 작은 글꼴이있는 정말 넓은 페이지를 원하지 않습니다.웹 디자이너가 확대 / 축소 할 때 잘 확장되도록하기 위해 어떤 조치를 취해야하는지 모르겠지만 FF3의 확대는 훌륭하고 IE7의 것은 쓸모가 없습니다 ...

디자인은 합리적인 범위 내에서 유동적이어야합니다.

Use CSS에는 min-widthmax-width 속성 (IE7 이상을 포함한 모든 브라우저에서 작동)이있어 디자인이 너무 많이 늘어나는 것을 방지합니다.

중요한 것은 텍스트 블록이 너무 넓게 늘어나지 않도록하는 것입니다.창이 확장되면 읽기가 어려워 지므로 텍스트 블록이 무한히 늘어 나면 안됩니다.

사람들이 말했듯이 사이트가 어떤 정보를 표시하는지에 따라 다릅니다.두 가지 좋은 예는 StackOverflow와 Google 이미지입니다 ..

스택 오버플로가 화면에 맞게 늘어 나면 긴 줄을 스캔하기가 어렵 기 때문에 긴 답변은 읽기가 귀찮을 것입니다. 이것이 신문에서 모든 항목에 열을 사용하는 정확한 이유와 그 이유입니다.책은 모두 같은 종류의 너비입니다.

콘텐츠가 기본적으로 200px 너비의 이미지로 구성된 Google 이미지를 사용하면 브라우저 너비에 맞게 확장되며 여전히 완벽하게 읽을 수 있습니다.

기본적으로 눈이 긴 텍스트를 읽는 것을 싫어한다는 점을 염두에두고이를 기반으로 디자인하세요.글꼴 크기를 늘리면 모든 레이아웃이 잘 조정되도록 사이트를 디자인 할 수 있습니다 (내가 생각할 수있는 유일한 사이트는 www.geektechnique.org입니다-ctrl and -/= 또는 ctrl+scrollwheel를 누르면 레이아웃이글꼴 크기)

많은 것 같네요. 상황에 따라 다릅니다.나는 보통 둘 다합니다.일부 콘텐츠는보기 좋게 보이거나 더 많은 공간에서 혜택을 볼 수없는 경우 고정 된 너비로 유지됩니다.다른 것들은 유용 할 것 같으면 100 %로 설정됩니다.

웹 사이트 디자인이 얼마나 복잡한 지에 따라 결정되어야합니다.더 복잡하거나, 그래픽 또는 구성 요소 측면 (콘텐츠 div의 양)이 웹 사이트의 확장 정도를 결정합니다.일반적으로 대부분의 그래픽 디자이너 웹 사이트는 그래픽 집약적이므로 확장되지 않습니다.그러나 정보 웹 사이트는 화면에서 읽을 수있는 공간을 최대한 활용할 수 있도록 확장 될 것이며 사용 편의성을 위해 복잡하지 않습니다.정말 선호도의 문제입니다.

사이트 내용에 따라 다르다고 생각합니다.SOFlow, 포럼 및 기타 사이트와 같은 사이트는 많은 세부 정보를 읽는 데 중점을 두므로 그렇게 할 수있는 공간이 더 많다는 것이 제 마음에 큰 이점입니다.세로 스크롤이 적을수록 좋습니다.

그러나 읽기 수준이 약간 덜 까다로운 사이트, 심지어 개별 제품을 단순히 표시하는 블로그 나 소매 사이트의 경우 고정 너비를 사용하면 더 간결하게 유지할 수 있습니다.

저는 완전 유동적 인 디자인의 열렬한 팬입니다.너무 긴 텍스트 줄에 대한 사용성 불만에 대해 ... 브라우저 창의 크기 때문에 너무 길면 창을 넓게 만들 수있는 것처럼 쉽게 창을 좁게 만들 수 있습니다.

참고 : 브라우저에서 확대 / 축소 기능을 사용하는 경우 고정 레이아웃은 텍스트를 스쿼시하는 반면 유동 레이아웃은 전체 화면을 차지할 수 있습니다.

아마 이것은 브라우저 문제 일 수 있지만 유동성을 선호하는 논쟁입니다

디스플레이보다 단락 너비가 크면 웹 사이트를 완전히 사용할 수 없게됩니다.읽는 모든 행에 대해 수평 스크롤바를 앞뒤로 움직여야합니다.저는 대학에서 웹 디자인 과목을하고 있는데 교과서는 화면 너비에 맞는 디자인을 유동적 인 레이아웃 이라고 부릅니다.

유동적 레이아웃을 사용하여 큰 클래스 프로젝트를 디자인하고 있는데 고정 너비보다 약간 더 문제가 있습니다.나는 다른 학생들이 그것을 사용하지 않을 것이라고 생각하며 마커는 눈치 채지 못할 것이며 우리가 모방하는 전문 사이트도 유동적이지 않습니다.

유동하다고 말하고 싶습니다. 확대 결과가 마음에 들지 않는 경우 사용자는 항상 더 작은 크기의 창으로 돌아갈 수 있지만 고정 레이아웃에 대해서는 아무것도 할 수 없습니다.

큰 화면을 가진 사용자가하는 일 때문에 사이트가보기 흉해 보인다는 생각이 정말 싫다면, 진실하고 아름다운 것을 위해 최소한 픽셀 기반 고정을 사용하지 마세요.레이아웃! CSS에는 "em"과 같은 깔끔한 텍스트 기준 크기 단위가있어 페이지의 일부는 글꼴 크기에 따라 크기가 조절되고 나머지 (예 : 이미지)는 "자연스러운"크기로 유지됩니다.

이를 사용하고 멍청한 픽셀 기반 고정 레이아웃을 사용하는 사이트를위한 해결 방법 인 FF3의 덜 유연한 "모든 크기 조정"에 의존하지 않고 페이지 크기를 잘 조정하지 않는 이유는 무엇입니까?

많은 사람들이 "이건 취향의 문제입니다."또는 "고화소 디스플레이에서 큰 글꼴이 마음에 들지 않습니다."와 같은 말을합니다.픽셀 수는 그것과 관련이 없으며 취향의 문제도 아닙니다.디스플레이 해상도 및 글꼴 크기와 직접 관련이있는 DPI의 문제입니다.레이아웃이 글꼴의 DPI에 따라 확장되는 경우 (예를 들어 ems로 지정되고 SVG를 사용하여) 모든 디스플레이에서 최적으로 작동하는 매우 아름답고 선명한 웹 사이트가 생성됩니다.

http://www.boutell.com/newfaq/creating/anyresolution.html

스타일 선호도의 문제입니다.구현에 따라 둘 다 동일하게 사용할 수 있습니다.화면이 충분히 넓어지면 열을 사용할 수도 있습니다.개인적으로 화면 아래에 좁은 텍스트 열 하나만 있으면 짜증이납니다. <시간>

2012 년 수정 : 예, 웹 사이트는 표시되는 창의 크기에 따라 반응해야합니다.

다음을 포함하여 이에 대해 자세히 알아볼 수있는 곳이 많습니다.

고정 설계와 유동 설계간에 절충안이있을 수 있습니다.유동적 인 사이트를 디자인 할 수 있지만 css 속성 max-width를 1024 (또는 기타)로 설정할 수 있습니다.즉, window width가 1024보다 작 으면 유동적 인 레이아웃을, 더 클 때 fixed width를 얻을 수 있습니다.

그러면 좁은 화면 사용자 (예 : 800 픽셀 eee 701)는 모든 단일 행을 읽기 위해 가로 스크롤바를 돌리지 않아도되고, 와이드 화면 사용자 (브라우저 창의 크기를 조정하는 방법을 모르는)는 500 자 너비를 얻지 못합니다., 1 자 높은 단락

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top