레이아웃을 Window 크기와 호환하여 글꼴 크기 조정을하는 방법

Question

좋은 자문 / 모범 사례 매뉴얼 등이 있습니까? 다음 두 가지 방법으로 페이지 레이아웃 유동성을 만들 수있는 방법을 설명하는 방법이 있습니까?

a) 레이아웃은 창 크기 조정에서 강력해야합니다.

b) 레이아웃은 사용자가 커밋 한 글꼴 크기를 원활하게 처리해야합니다.

페이지 레이아웃을 설계 할 때마다 다른 임시 방법을 사용하여 a)와 b) 모두에서 페이지를 강력하게 만듭니다. 내가 전에 사용한 방법 중 일부는 다음과 같습니다.

• 신체 취급 onresize ()
• 모든 값을 %로 선언합니다 (이미지 치수를 px로 정의해야 할 때 고착됩니다)
• -10,000 px에 div를 배치하고 글꼴 크기 조정을 확인하기 위해 간격으로 폴링합니다 (Gasp!)

나는 이러한 위의 방법이 상당히 나쁘고이 문제에 대한 표준적이고 강력한 방법을 찾고 싶습니다. 나는 여기있는 다른 사람들이 매일 이러한 문제에 직면하고 해결한다고 확신합니다.

Answer 1

보다 구체적인 레이아웃 솔루션을 찾고 있다면 요즘 일반적인 관행은 사전 제작 된 그리드 레이아웃을 사용하는 것입니다. 거기 있습니다 고정 너비 그리고 유체 버전, 둘 다 사용자의 글꼴 크기로 확장됩니다. Yui도 하나가 있습니다. JS, 오프 스크린 물건이 없습니다.

그러나 브라우저 내에서 텍스트를 스케일링하는 사용자에 대한 참조도 볼 수 있습니다. 이것은 예전 문제가 아닙니다. 예전에는 당신이 상당히 조심해야했다. 이제 모든 브라우저는 텍스트와 이미지를 포함하여 서로에 비례하여 페이지 전체를 확장합니다. 텍스트 크기 조정은 이미지가 커짐에 따라 페이지에서 "확대"되는 것과 같습니다. "전체 크기"모드에서 px (또는 % 또는 pt 또는 무엇이든)의 텍스트와 열 너비를 단순히 측정 할 수 있으며 브라우저는 잘 조정할 수 있습니다.

Answer 2

웹 페이지를 디자인하는 것은 많은 사람들을위한 요리와 같습니다. 요리를 싫어하는 사람들이 항상있을 것입니다. 당신이해야 할 일은 대부분의 방문객을 행복하게 만드는 방식으로 디자인하는 것입니다.

Answer 3

모든 액체 페이지에는 뷰포트 관계 크기와 고정 픽셀 크기가 혼합되어 있습니다 (이미지 및 이미지와 일치하도록 크기가 필요한 기타 요소). 일부 요소에 대해 고정 EM 크기를 원할 수도 있습니다.

따라서 일반적인 접근법은 오른쪽에 고정 된 넓은 사이드 바를 절대 위치에 놓고 본체 텍스트에 그 너비와 같은 오른쪽 마진을 제공하는 것입니다. 이러한 종류의 레이아웃을 달성하는 방법에는 여러 가지가 있습니다. '액체 CSS 열'에 대한 끝없는 게시물을 참조하십시오.

CSS만으로도 원하는 상대와 절대의 조합을 제공 할 수없는 가장 복잡한 경우에는 항상 테이블이 있습니다. 이상적이지는 않지만 일반적으로 JavaScript 의존적 레이아웃보다 낫습니다.