상대 위치는 있지만 액체 레이아웃이 아님

Question

저는 CSS에서 새로운데, Liquid가 아닌 브라우저 화면 크기로 수정할 수있는 상대 레이아웃 디자인이 가능한지 궁금합니다.

예를 들어 사용자가 화면 페이지를 최소화해도 모든 항목이 전체 화면과 동일한 레이아웃으로 유지됩니다. 이것이 가능하다는 것은 확실하지 않지만 전체 화면 형식에서 완벽하게 작동하는 상대 레이아웃은 있지만 사용자가 페이지 크기를 최소화하거나 크기를 조정하면 모든 그림과 텍스트도 최소화됩니다. img와 같은 일부 요소는 그렇게 나쁘지 않습니다. (들)하지만 내 탐색 메뉴에도 영향을 미치므로 페이지 크기를 재조정 할 때 끔찍하게 보입니다. 제가 멈출 수있는 방법이 있습니까?

Answer 1

용기의 크기를 최소 너비로 유지하면 브라우저 옆에 크기가 조절되지 않습니다. 이를 위해 최소 너비 CSS 속성을 사용할 수 있습니다.

<!-- Document --> 
<div id="site-wrapper"></div> 
<!-- Document --> 

속성

는 CSS3 미디어 쿼리를 사용하여 같은

#site-wrapper { min-width: 1000px; /*For example*/ } 

Answer 2

으로 사용되어야한다. 당신은 '반응 형 디자인 "이라고 말하는 무엇

http://www.w3.org/TR/css3-mediaqueries/

Answer 3

. 이 (또한, 단지 좋은 출발점)의 좋은 예를 원하는 경우

은 상단에 자신의 메뉴를 살펴 보자 http://twitter.github.com/bootstrap/

에서 부트 스트랩을 확인하고 당신이 할 때 발생하는보고 뷰포트가 더 작습니다 (창 크기 조정).

는

편집 :

나는 그가 그것을 할 수 있다면 그는 물어 보는 어떤 생각의 폭 지혜 "조정"하지만 현명한 높이를 함부로 대하지에서 요소를 유지한다. 그의 JSFiddle은 비율 높이를 사용하고있었습니다.

.row_1 
{ 
    background-color: green; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height:30px; 
    cursor: pointer; 
    z-index: 20; 
} 
.row_2 
{ 
    background-color: gray; 
    position: relative; 
    width: 100%; 
    height:100%; 
    padding: 30px 0px; 
} 

.row_3 { 
    background-color: black; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height:30px; 
    z-index: 20; 
    color: #fff; 
} 

다음은 업데이트 된 JSFiddle입니다.

http://jsfiddle.net/xBaTN/