반응 형 디자인 템플릿

Question

반응 형 디자인에 익숙하지 않아 반응 형 메뉴, 이미지, 블록 및 모든 것을 웹 사이트 템플릿으로 만들고 싶습니다. 나는 모든 폭이 비율에 있어야 것을 준비

, 나는

http://jsfiddle.net/hQBR6/

가 어떻게 그것으로 양식 입력이 UL 아래에 가지 않고 다른 화면 크기에 응답 것 할 수 있습니다 예를하게?

Answer 1

문제는 PX에 설정된 여백과 %로 설정된 너비를 혼합한다는 것입니다. 화면 크기가 특정 크기보다 작 으면 여백이 크고 입력이 아래로 떨어지는 요소에 충분한 공간이 없습니다.

repsonsive 디자인 작업을하는 경우 여백을 % -로 설정해야합니다. 여기

내가 그것을 작동하도록 코드를 수정하는 방법입니다

ul#menu{ 
    border:1px solid black; 
    display: inline-block; 
    float:left; 
    max-width:50%; 
    margin-left:5%; /* changed to percentage */ 
    margin-top:36px; /* should be percentage as well*/ 
    list-style-type:none; 
} 
ul#menu li{ 
    display: inline-block; 
    float:left; 
    margin-right:36px; /* should be percentage as well*/ 
    width: auto; 
} 

#header form { 
    display: inline-block; 
    margin-right:1%; /* changed to percentage */ 
    float:right; 
    width:10%; 
} 

#header form input{ 
    margin-top:28px; 
    background-color: #e0e0e0; 
    border-radius:4px; 
    border:none; 
    height: 26px; 
    color:#a6a6a6; 
} 

참고 : 나는 당신에게 달려 있습니다 왼쪽/오른쪽 여백을 실제 크기 만했다.

희망이 당신이 반응 설계를 시작하는 좋은 예를 찾을 수 아래 링크를 통해 이동하시기 바랍니다 귀하의 빠른 시작을 위해

Answer 2

을하는 데 도움이됩니다.

http://twitter.github.com/bootstrap/