고정 된 치수를 사용하지 않고 공간을 정의하는 방법은 무엇입니까?

Question

먼저 오버 플로우가 생겼으므로 이것이 잘못된 위치에 있으면 용서해주십시오.

여기 내 질문이 있습니다. 저는 CSS를 배우고 있으며, 현재 간단한 테스트 페이지로 html로 스타일을 지정하고 있습니다. 일부 텍스트를 이동해야하므로 텍스트와 일부 양식 (~ 100px) 사이에 좋은 공간이 있습니다. 나는 작동하는 100px와 같은 margin에 고정 값을 입력했으나 반응이 없습니다. 휴대 전화 또는 다른 크기의 모니터에서 파일을 볼 경우 정적 인 100 픽셀을 유지하려고하기 때문에 왜곡됩니다.

과거에는 픽셀보다는 백분율을 사용하여이 문제를 해결했습니다. 예를 들어 이미지 width을 100 픽셀이 아닌 100 %로 설정합니다. 그것은 당신이 무엇을 보든 화면을 항상 채 웁니다. 불행하게도 나는 백분율로 공간을 정의 할 수 없다.

고정 된 치수를 사용하지 않고 공간을 정의하여 응답 할 수있는 방법은 무엇입니까?

예 :

• 나는 사업부의 배경으로 큰 이미지를 사용하는 것을 시도하고있다. div 에는 아직 아무 것도 없으므로 당연히 나는 이미지의 얇은 스트립 만 볼 수 있습니다. 픽셀을 사용하여 이미지 크기를 설정하면 div가 확장되지만 응답하지 않습니다. 백분율을 사용하려고하면 얇은 띠가 남습니다. 이미 100 %에 있기 때문에 div의 100 %는 div 너비를 변경하지 않습니다. (나중에 이미지를 body의 배경으로 적용하여 문제를 해결했지만 질문이 남아 있음
• 버튼 아래에 200px의 텍스트가 있습니다. 문제는 텍스트와 버튼이 모두 맨 위에 놓 이도록하려는 것입니다. 배경 이미지의 픽셀 크기를 설정하고 이미지의 해상도가 낮 으면 이미지의 크기가 아무리 작 으면 항상 텍스트 아래쪽에 200 픽셀이 표시됩니다. 어떻게 설정하면 항상 아래에 특정 퍼센트의이되도록 설정할 수 있습니까? 버튼을 누르거나 (더 편리 쪽) 이미지의 바닥에서

참고 : 나는 JS, PHP 또는 CSS와 HTML 이외의에 대해 잘 모르는 다른 프로그래밍 언어가있을 경우. 당신의 대답에 사용할 필요가 있습니다. 친절하게 설명하십시오. 감사!

Answer 1

div의 고정 된 높이와 너비를 설정하려면 반응 형이지만 단위는 vh와 vw입니다. 예를 들어, div의 높이를 뷰포트의 40 % (뷰포트는 웹 페이지의 사용자가 볼 수있는 영역)로 설정하려면 다음을 사용하십시오.
height = 40vh;
브라우저의 크기를 조정하거나 보거나 다른 장치에서는 항상 해당 div를 뷰포트의 높이의 40 %로 렌더링합니다. 다른 상대 단위를 사용할 수도 있습니다. http://www.w3schools.com/cssref/css_units.asp