페이지의 크기에 비례하여 HTML 텍스트 상자의 크기를 조정하려면 어떻게합니까?

Question

페이지 축소시 두 개의 텍스트 상자 크기를 변경하는 방법에 대해 고민하고 있습니까? 따라서 누군가가 페이지를 옆으로 드래그하면 두 개의 상자도 작아지기 시작합니다 (의미가있는 경우). 제발 도와 주실 수 있습니까?

여기 내 코드는 지금까지 있습니다 : http://jsfiddle.net/xiiJaMiiE/3nQue/

.homeform { 
position:relative; 
width:20%; 
} 

감사합니다 사전에!

Answer 1

당신은 당신이 단순히 다음

.homeform input { 
    position:relative; 
    width:50%; 
} 

에 이상을 단축 할 수 있습니다, 당신이 제출 버튼이 너무 크기가 조정됩니다 것을 원하는 경우 그 크기

.homeform input[type="email"], .homeform input[type="password"] { 
    position:relative; 
    width:50%; 
} 

을 조정하려면 입력 요소를 선택해야합니다

은 class="homeform" 속성을 가진 요소의 모든 입력 요소의 크기를 조정합니다.

비록이 구현의 팬이 아니지만. 모바일에있는 누군가가 귀하의 웹 사이트를 방문한다고 가정하면 텍스트 상자가 너무 작을 것입니다. (팁 : min-width 속성 또는 반응 형 디자인)

Answer 2

.homeform { width: 100%; } 
input[type="text"] { width: 100%; box-sizing:border-box } 

트릭을해야합니다.

상자 크기 조정은 테두리 및 패딩이 지정된 요소 너비에 포함 된 상자 모델로 전환합니다. 그렇지 않으면 컨테이너에 입력이 오버플로됩니다.

Answer 3

.homeform은 input 태그를 포함하는 div입니다. 스타일은 input에 입력해야합니다.

.homeform input{ 
    width: 20%: 
}