화면 크기에 맞게 HTML 레이아웃 크기 조정

화면 해상도와 함께 자동으로 HTML 레이아웃을 수정하는 방법을 알려주시겠습니까? 예를 들어, 화면 해상도가 1024 x 768 픽셀 인 HTML을 코딩하고 있습니다. 800 x 600 픽셀로 전환하면 HTML 창을 자동으로 변경하여 화면을 수정하고 싶습니다.화면 크기에 맞게 HTML 레이아웃 크기 조정

어떻게하면됩니까?

출처

2009-03-24 kumar

나는이 질문을 이해하고 있는지 잘 모르겠다. 브라우저가 최대 화면 해상도에 맞게 자동으로 창 크기를 조정하는 방법에 대해 묻고 있습니까? –

자바 스크립트를 사용할 필요가 없습니다. CSS 파일에서 요소의 너비 (div, table 등)를 100 %로 설정하기 만하면됩니다. 그러면 뷰포트의 너비에 따라 조정됩니다.

<!-- in yourHtml.html file --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

    <head> 
    <link rel="stylesheet" type="text/css" href="yourStyleSheet.css" /> 
    </head> 

    <body> 
    <div class="fullWidth"> 
     Your content 
    </div> 
    </body> 

</html> 

<!-- in yourStyleSheet.css file --> 
div.fullWidth { 
    width:100%; 
    height:100%; 
    background-color:#CCC; 
}

출처

2009-03-24 09:36:02 andi

당신이 실제 브라우저 창을 의미하는 경우, 자바 스크립트가 현재 해상도를 반환 screen.width 및 screen.height있다 (같은 것은 높이에 적용) examples of use을 참조하십시오. 특정 웹 페이지에서 타이머로 실행되는 스크립트를 설정하여 이러한 값이 변경되었는지 확인하고, 변경된 경우 창 크기를 조정할 수 있습니다. 그것은 특이한 성과이지만 - 화면 해상도가 매우 드물게 바뀌므로이 JS 스크립트가 포함 된 특정 페이지에서 작업해야합니다. 또한 width와 height 속성은 도구 모음이 어디에 있는지에 대해 아무런 메모도하지 않으므로 창을 그 뒤에 숨길 수 있습니다. 자동 최대화가 사용자가 선호하는 것보다 우선하기 때문에 이는 또한 나쁜 행동입니다.

출처

2009-03-24 09:41:57

귀하의 질문은 막연한 것이므로 귀하의 문제와 관련이있을 수있는 몇 가지 예를 들어 보겠습니다.

function getClientSize() { 
    var width = 0, height = 0; 

    if(typeof(window.innerWidth) == 'number') { 
     width = window.innerWidth; 
     height = window.innerHeight; 
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { 
     width = document.documentElement.clientWidth; 
     height = document.documentElement.clientHeight; 
    } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { 
     width = document.body.clientWidth; 
     height = document.body.clientHeight; 
    } 

    return {width: width, height: height}; 
}

프로그래밍, 브라우저 창 크기 조정을 감지 window.onresize 이벤트에 리스너를 연결하려면 : 당신은 자바 스크립트를 사용하여 브라우저 창의 크기를 얻을 필요가있는 경우

, 여기에 예입니다. 이미 수신기가 연결되어있는 경우 다음의 간단한 예는 (대신 사용하여 addEventListener /는 attachEvent 적절한) 상관하지 않습니다 :

HTML 창으로

window.onresize = function() { 
    var size = getClientSize(); 
    alert("Width: " + size.width + ", Height: " + size.height); 
}

출처

2009-03-24 09:48:53 stpe

, 나는 당신이 HTML 내용과 얘기한다고 가정 브라우저 창이 아닙니다.

이 경우 키워드는 liquid/fluid/elastic design입니다.

A List Apart 사이트의 Elastic Design by Patrick Griffiths 또는 search google for liquid design을 읽는 것이 좋습니다.

출처

2009-03-24 09:48:56 mouviciel

그것은 매우 이상한데, [데모 페이지] (http://www.htmldog.com/articles/elasticdesign/demo/)는 내 넓은 모니터에 맞지 않습니다. (그것이 내가 기대했던 것입니다.) ? –

화면 크기에 맞게 HTML 레이아웃 크기 조정

답변

관련 문제