내 CSS 반응성을 만드는 방법

Question

그는 내 응용 프로그램에 대한 표준 템플릿을 만들고 있습니다. 나는 CSS를 먹고 좋은 반응을 보이는 디자인을 만들기 위해 두통을 앓고 있습니다.

지금이 내 생각이다 : 그것은 밖으로 작동하는 방법

이다 : 나는 아마이 작업을 수행 할 수있는 몇 가지 자바 스크립트로 지금

demo

을하지만이 경우 CSS에서 가능하면 좋을 것입니다. 제 질문은 어떻게 HTML과 CSS로 디자인을 할 수 있을까요?

jsFiddle 단지 전면에 재미 :

jsFiddle

내 CSS :

body{ 
    font-family:"Trebuchet MS",sans-serif; 
    padding:0px; 
    margin:0px; 
} 

#content{ 
    min-height: 100%; 
    width: 100%; 
    position: absolute; 
    background-color: #5adc23; 
} 

input[type="button"]{ 
    border:2px outset rgb(166, 166, 166); 
    display:inline-block; 
} 

input[type="button"]:hover{ 
    border:2px inset rgb(166, 166, 166); 
    display:inline-block; 
    cursor: pointer; 
} 

#mainbar{ 
    height: 31px; 
    background-color: rgb(109, 164, 227); 
    background-image: -webkit-linear-gradient(0deg, rgb(39, 162, 207) 1%, rgb(63, 181, 224) 36%, rgb(63, 181, 224) 64%, rgb(39, 162, 207) 100%); 
} 

    #mainbar_border{ 
     height: 100%; 
     border-bottom:1px solid rgb(0, 0, 0); 
     color: rgb(255, 255, 255); 
     font-family: 'Courier New', serif; 
     font-size: 21px; 
    } 

#mainmenu{ 
    width: 40px; 
    height: 96%; 
    min-height: 100%; 
    margin-top: 0px; 
    margin-bottom: 0px; 
    float: left; 
} 

    #mainmenu_border{ 
     height: 99%; 
     padding: 4px; 
     padding-top: 46px; 
     padding-bottom: 19px; 
     border-bottom-width: 1px; 
     border-left-width: 1px; 
     border-bottom-style: solid; 
     border-left-style: solid; 
    } 

     #mainmenu_item_container{ 
      list-style-type:none; 
     } 

#content_app{ 
    float: left; 
    width: 88%; 
    height: 96%; 
} 

    #content_app_border{ 
     height: 99%; 
     padding: 4px; 
     border-bottom-width: 1px; 
     border-left-width: 1px; 
     border-bottom-style: solid; 
     border-left-style: solid; 
     border-right-width: 1px; 
     border-right-style: solid; 
    } 

내 HTML :

<div id='content' class='invoer'>  
    <div id='mainbar'> 
     <div id='mainbar_border'> 
      Mainbar 
     </div> 
    </div> 
    <div id='mainmenu'> 
     <div id='mainmenu_border'> 
      <ul id='mainmenu_item_container'> 
       <li><input type='button' value='Load content' title='load some more shit to test the resposive design' id='btn' action='loadmoreshit' /></li> 
       <li>button</li> 
       <li>button</li> 
      </ul> 
     </div> 
    </div> 
    <div id='content_app'> 
     <div id='content_app_border'> 
      content 
      <br> 
       <br> 
        <br> 
     </div> 
    </div> 
</div> 

Answer 1

This JsFiddle을보십시오. Jefferson이 모바일 장치 용 대체 버전을 만들 것을 제안하면서 여기에서 미디어 쿼리를 사용할 수 있습니다. 하나의 팁 - 여기에있는 div는 스켈레톤처럼 사용해야하며 스타일을 지정하지는 않습니다. 테두리와 다른 스타일을 추가하기 시작하면 가장자리가 더 이상 정렬되지 않습니다. CSS와 HTML은 다음과 같습니다. -

<div id="header">Header</div> 
<div id="left_nav">Left Navigation</div> 
<div id="content">Content</div> 

div { 
    position: absolute; 
} 

#header { 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    height: 40px; 
    background: blue; 
} 

#left_nav { 
    top: 40px; 
    left: 0px; 
    width: 100px; 
    bottom: 0px; 
    background: red; 
} 

#content { 
    top: 40px; 
    left: 100px; 
    bottom: 0px; 
    right: 0px; 
    background: green; 
} 

업데이트 : 마지막 의견을 마친 후 좀 더 작업했습니다.

1. 왼쪽 메뉴와 컨텐츠는 헤더를 수용하기 위해 위에서 아래로 100 픽셀을 시작한다 : 내가 그들을 이해 첫째, 당신이 여기 기준이다.
2. 왼쪽 마누와 내용은 최소한 페이지의 맨 아래까지 확장되어야합니다.
3. 왼쪽 메뉴 또는 콘텐츠가 페이지 하단을 초과하여 오버플로되는 경우 : a. 그들은 높이가 같아 지도록 둘 다 확장해야합니다. b. 개별 패널 대신 전체 페이지가 스크롤되어야합니다.

이 점을 염두에두고 CSS와 HTML만으로 이러한 모든 효과를 낼 수 없어서 여기에 자바 스크립트가 필요할 수 있습니다. #main_container에서 오버플로되도록 this JSFiddle을 업데이트했습니다. 이 시점에서 솔루션은 1, 2 및 3b를 수행합니다.

$(document).ready(function(){ 
    var body_height = $("body").height(); 
    var body_scroll = $("body").get(0).scrollHeight; 
    var menu_height = $("#left_nav").height(); 
    var content_height = $("#content").height(); 

    if(body_scroll > body_height && (menu_height != content_height)) { 
     if(menu_height > content_height) { 
      $("#content").css("height", (menu_height + "px")); 
     } else { 
      $("#left_nav").css("height", (content_height + "px")); 
     } 
    } 
}); 

이 모든 #left_nav 및 #content (가) 같은 높이 지 확인입니다 않습니다 3A를 달성하기 위해 나는이 자바 스크립트를 추가했다. 그것은 JQuery를 사용하기 때문에 JQuery를 사용하지 않는다면 순수 Javascript를 위해 다시 작성해야한다. 하지만 JQuery를 사용하지 않는 경우 here으로 설정하는 것이 좋습니다. 너의 인생을 훨씬 편하게 해줄거야. 또한 #spike div를주의 깊게 살펴보십시오. div는 위치 지정 요소 중 하나에 "border"div를 추가하는 예제를 제공합니다.

희망이 도움이됩니다.

Answer 2

당신은 라이트 CSS는 프레임 워크를 사용할 수 있습니다 twitter.github.io/bootstrap, foundation.zurb.com 또는 gumbyframework.com

이렇게하면 지상에서 모든 것을 만들 필요가 없습니다. 반응 형 스캐 폴딩, 폼, 테이블, 버튼, 메뉴 등과 같이 처음부터 많은 스타일링을 얻을 수 있습니다.

초보자는 초보자로서 좋고 좋은 것을 만들고 쉽게 익힐 수 있습니다.

Answer 3

디자인을 신속하게 응답 할 수있는 방법은 media queries입니다.
이것은 html과 css 만 필요합니다. 당신은 당신 자신의 미디어 질의를 고치거나 미리 반응하는 프레임 워크를 사용할 수 있습니다. twitter bootstrap과 같은

CSS3의 미디어 쿼리는 장치의 기능을 살펴보고 모든 종류의 것들을 확인하는 데 사용할 수 있습니다. 예를 들면 :

- (브라우저 윈도우의) 폭과 높이
- 장치의 폭과 높이
- 오리엔테이션 - 예를 들어 가로 또는 세로 모드에서 전화가?
- 해상도

그런 다음 이러한 기능에 따라 HTML의 스타일을 지정할 수 있습니다.

Answer 4

부트 스트랩과 같은 기존 프레임 워크를 사용하는 것은 불편한 일이라면 좋은 생각 일 수 있습니다. 위에 설명 된 내용은 실제로 미디어 쿼리가 필요하지 않지만 실제로는 매우 기본적인 유체 레이아웃이므로 설명하지 않습니다.

다음은 기본적인 형태로 원하는 것을 달성

HTML :

<div id="content" class="invoer"> 
    <div id="mainbar"> 
     Mainbar 
    </div> 
    <div id="mainmenu"> 
      <ul> 
       <li>button</li> 
       <li>button</li> 
      </ul> 
    </div> 
    <div id="content_app"> 
      <br>blablabla content 
      <hr> 
      <br>blablabla content 
    </div> 
</div> 

CSS를 여기

#content { 
    background:#00E113 
} 
#mainbar { 
    width:98%; 
    height:40px; 
    background:#00ACD9; 
    color:#fff; 
    padding:1%; 
} 
#mainmenu { 
    width:100px; 
    position:absolute; 
    left:0; 
} 
#content_app { 
    margin-left:140px; 
} 

는 영향을주지 않도록 내가 절대 위치 MAINMENU을 사용 주변 요소의 폭. 그런 다음 main_menu를위한 충분한 공간을 허용하기 위해 content_app에 margin-left를 설정하십시오.

는 당신에게 당신의 그림이 찾고있는 레이아웃의 거친 버전을 줄 것이다 여기 http://jsfiddle.net/PMJBc/2/