화면 크기와 웹 페이지 불일치

Question

나는 웹 페이지 (First Day)에서 작업하고 있으며 내 화면 중 하나에서 원하는 것처럼 보입니다. 화면 크기는 1920 X 1080입니다. 그러나 더 작은 화면에서는 모양이 다릅니다. 내 웹 페이지를 모든 화면 크기에서 동일한 모양과 느낌으로 조정하는 방법은 무엇입니까?

나는 인터넷을 둘러 보았고 그것이 가능하지 않다는 것을 알았고 다른 사람들은 이것을하기 위해 많은 것을 취한다고 말했다. 나는 도움이 될만한 것에 대한 도움과 의견을 원합니다. 페이지가 당신이 반응 레이아웃을 만드는 방법을 배울 필요가 모든 해상도에서 잘 작동에 대한

, 당신에게 모든

Answer 1

먼저 감사, 이러한 레이아웃은 각 화면 해상도 자신을 adaptate 것입니다.

display: block (이미지에서 블록을 사용하는 것이 좋음)이 아닌 한 백분율과 display: table을 사용해보십시오.

당신의 텍스트 :

은 오후 7시에서 10월 15일 (수요일)을 시작합니다 칠리는 오후 6시에 제공됩니다. 그것은 당신의 mainContent 사업부의 높이를 초과하기 때문에 당신이 50 %로 mainContent div의 높이를 변경하고에 display: table를 추가하는 경우

, 당신의 레이아웃을 깨고, 레이아웃은 더 이상 중단됩니다하지 않습니다.

해상도가 1366x768 이하인 화면에는 이미지가 너무 크기 때문에 이미지의 높이를 백분율로 정의하면 이미지가 항상로드 될 화면에 이상적인 크기로 표시됩니다.

당신은 세 가지 주요 div가 있습니다 header, mainContent 및 footer을, 당신은 당신이 세 가지 주요 div의를 가지고 있고이 사이트지는 경우의 높이를 설정, 확인, 표시 할 수있는 스크롤 막대없이 전체 사이트를 표시 할 이 당신의 인생을 절약 할 코드가 아니라 웹 사이트의 레이아웃을 만들 수있는 새로운 비전의 시작

header: height: 10% 
mainContent: height: 60% 
header: height: 30% 

: div의 그들은 보완하지 않도록 같은 사이트의 한계를 초과. :)