CSS : 고정 또는 플로트 레이아웃? [닫은

StackOverflow https://stackoverflow.com/questions/329900

  •  11-07-2019
  •  | 
  •  

문제

내 질문은 CSS 고정 레이아웃과 브라우저의 너비를 채우기 위해 확장되는 플로트 레이아웃을 중심으로 진행됩니다.

지금 제가 실행하는 문제는 페이지의 너비에 따라 마스트 헤드 크기를 조정하는 것입니다 (현재 브라우저 구현이 구현 될 때 이해할 수없는 것은 없습니다. CSS3 background-image: size;). 이 시점에서 나는 주변의 모든 곤경에 도달 한 것 같은 느낌이 든다 : 고정 된 CSS 레이아웃을 사용하도록 사이트를 재 작업합니까, 아니면 현재 레이아웃을 유지하고 Masthead 이미지를 확장하여 제공된 대부분의 공간을 채우도록 노력합니까? ? 또한 고정 너비 레이아웃으로 이동하는 장단점과 한 레이아웃을 다른 레이아웃을 사용하는 (보이지 않는) 파급 효과는 무엇입니까?

문제의 사이트는이 질문에 대한 의견으로 주어질 것입니다. 트래픽을 늘리려고 노력하고 싶지 않습니다.

편집 : 다른 생각이 있습니까?

도움이 되었습니까?

해결책

이미지를 스케일링하는 대신 브라우저가 크기가 조정되어 이미지를 더 많이 드러내는 것은 어떻습니까? 그것은 같은 효과는 아니지만 이미지로 전체 공간을 채우는 쉬운 방법입니다.

예를 들어 마스트 헤드의 배경 이미지에 도시 스카이 라인의 사진 위에 어떤 종류의 로고가 들어 있다고 가정 해 봅시다. 이것은 전체적으로 1600px 너비입니다. 로고는 이미지의 왼쪽에 앉아 도시 경영은 오른쪽으로 확장됩니다. 그리고 우리는 당신의 마크 업이 대략적으로 보인다고 가정합니다.

<div id="page">
  <div id="masthead">...</div>
  <div id="navigation">...</div>
  ...
</div>

#PAGE 요소를 An로 설정할 수 있습니다 탄력있는 너비와 배경 이미지를 #MASThead 요소에 적용합니다.

#page {
  max-width: 1600px;
  min-width: 800px;
  width: 80%;
}

#masthead {
  background: url('path/to/image.jpg') no-repeat left top;
  height: 100px;
  width: auto;
}

여기서 일어나는 것은 #MASThead 요소가 #PAGE 요소의 너비로 확장되며, 이는 브라우저 창의 폭에 따라 800px에서 1600px 너비 (포함) 사이에 있습니다. #PAGE 요소의 폭이 800px 인 경우 스카이 라인의 왼쪽 800px 만 볼 수 있습니다. 폭이 1600px 인 경우 전체 스카이 라인이 보입니다. 이렇게하면 로고가 항상 보이고 브라우저가 조정되면 더 많은 도시 경관이 드러납니다.

이것은 더 큰 이미지를 사용해야합니다 (최소한 최대 폭이 넓어지면 탄력적으로 가면). 결과는 크기가 상관없이 잘 보일 수있는 마스트 헤드입니다. Strager는 브라우저의 이미지 크기 조정 알고리즘을 언급했습니다.

다른 팁

어떤 종류의 이미지입니까? 그것의 어떤 부분이 반복 가능합니까? 때로는 이미지의 반복 요소에 대해 하나 또는 태그가 고정 요소에 대해 두 개의 레이어를 사용합니다.

예를 볼 수 있습니까? 문제에 대한 정답에 도달하는 것이 더 쉬울 것입니다.

백그라운드 이미지를 페이지 너비로 확장하려는 경우 배경 이미지를 확장하여 크로스 브라우저 방법이 없으므로 고정 크기의 레이아웃을 사용하는 것이 좋습니다. 방문자 해결.

고정 너비 레이아웃은 디자이너에게는 더 많은 유연성을 제공하지만 방문자에게는 그렇지 않습니다. 너비의 x 픽셀 인 레이아웃을 만들면 웹 사이트 픽셀 바이 픽셀을 취향으로 미세 조정할 수있는 반면 "플로트"레이아웃 (액체 레이아웃이라고 함)은 전적으로 백분율 값을 기준으로합니다. 컴퓨터에서 컴퓨터로. 화면에서 레이아웃을 테스트 할 수 있고 다른 사람에게 어떻게 나타나는지 알지 못하고 (예 : 20px 마진은 768px 또는 960px 고정형 넓이 레이아웃에 더 많은 영향을 미칩니다. 1280px- 액체 컴퓨터 화면.

고정 폭 레이아웃에 대한 주요 원인 IMO는 더 큰 화면에서는 너무 작고 작은 화면에서는 너무 큽니다. 768px는 상당히 표준 고정 폭 레이아웃 이었지만 이제는 세계가 800x600에서 멀어지면서 너무 작습니다. 이제 960px는 상당히 표준이므로 800x600에는 너무 크지 만 1280x1024에서는 여전히 너무 작습니다.

그것은 모두 청중과 사이트가 어떻게 맞는지에 달려 있습니다. 일부 레이아웃은 액체로 만들어지고 완벽하게 잘 작동 할 수 있지만 다른 레이아웃은 고정되어야합니다 (설명한 것과 같이).

왜 사용하지 않는가 u003Cimg> 배경 이미지를 사용하는 대신 헤더 이미지 (Masthead) 태그가 있습니까?

헤더 그래픽을 확장하지 않는 것이 좋습니다. 대부분의 브라우저는 이미지 스케일링 (가장 가까운 이웃?)에서 끔찍하며 많은 사람들에게는 좋지 않습니다.

나는 유체/플로트/액체 레이아웃을 직접 사용합니다. 사실, 대부분의 사이트는 단일 열을 사용하므로 "정상적인"사이트 레이아웃이있는 모든 복잡성에 대해 걱정할 필요가 없습니다.

일반적으로 텍스트 열이 브라우저로 확장되는 레이아웃을 만드는 것은 나쁜 생각입니다. 선이 길어지면 텍스트를 읽기가 어려워집니다. 나는 텍스트 열을 위해 고정되어있는 것을 권장합니다.

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