Web page Width Height adaptive size

Today, the resolution of the display more and more, the terminal has become diversified, web development page Adaptive problems more and more, if not done, once the resolution of the display changes, the content of the display may appear many unexpected typesetting problems. The problem with presentation of different terminals can be achieved through a responsive layout, without the need for a responsive layout when we need to avoid these problems.

Width Adaptive:

1, set the outermost container (such as DIV) width is 100%;

2, if the site has a picture of the head, it is not easy to set the width of 100%, the situation will appear repeat, or the picture size beyond the outermost container width, you can set the outermost container width is fixed value: 960px, 980px, 1000px, and set margin:0 auto;

3, if it is found that the larger resolution of the display 960px width is not generous and beautiful, you can set different width according to different resolutions (the same to set margin:0 Auto), and make the corresponding size of the picture replacement can:

$(function(){    varScreenWidth =Window.screen.width; varwidth; varImgurl; if(ScreenWidth >= 1440) {width= "1400px"; Imgurl= "1400.png"; } Else if(1024x768 < ScreenWidth && ScreenWidth < 1440) {width= "1200px"; Imgurl= "1200.png"; } Else{width= "980px"; Imgurl= "980.png"; } $obj. css ("width", width);//$obj The jquery object to set the width$img. CSS ("backgroundimage", "url (" + Imgurl + ")");//$img The jquery object to set the background})

Highly adaptive:

1, can directly set the outermost container and HTML, body height of 100%;

2, sometimes, the content of the Web page will be different depending on the permissions or the full extent of the data display is not the same size, so that we need to compare the size of the page and the resolution height of the monitor to make corresponding adjustments:

functionAutoheight (objId) {varNowheight; if(Window.innerheight) {//FFNowheight =Window.innerheight; }Else{nowheight=Document.documentElement.clientHeight; }    if(Nowheight >document.body.clientHeight) {document.getElementById (objId). Style.height= nowheight + ' px '; }Else{document.getElementById (objId). Style.height= document.body.clientHeight + ' px '; }}

3, if the page has a footer (copyright information, etc.), the use of the method of 2 may make the footer hanging in the middle of the page, at this time, the page will often be header, main, footer such a structure, there will be an outer container container, Method 2 is to set the height of the outer container. Of course, we can set the height of the main by subtracting the height of the header and footer after acquiring the new height of the container, which avoids the situation where the footer appears in the middle of the page.

In addition, we have another way to solve the problem of footer: position.

Set the position:relative of container, Main and footer Position:absolute (the remaining CSS properties omitted):

  #container  { position : relative ; } #main  { position : absolute ;    : 80px ; /*  header height  */       bottom : 40px ; /*  footer height  */}  #footer  { position : absolute ;  bottom : 0 ;} 

This combination of the above width to set, found that after setting the position, margin:0 Auto is invalid, because the reason for leaving the flow of the document, so we need to set container margin-left is half the width of the negative value, namely:

$(function(){    varScreenWidth =Window.screen.width; varwidth; varImgurl; varLeft ; if(ScreenWidth >= 1440) {width= "1400px"; Left= " -700px"; Imgurl= "1400.png"; } Else if(1024x768 < ScreenWidth && ScreenWidth < 1440) {width= "1200px"; Left= " -600px"; Imgurl= "1200.png"; } Else{width= "980px"; Left= " -490px"; Imgurl= "980.png"; } $obj. css ({"width": width, "margin-left": Left});//$obj The jquery object to set the width$img. CSS ("backgroundimage", "url (" + Imgurl + ")");//$img The jquery object to set the background})

The above is only the way I used the idea, there is no specific implementation of the demo, according to the actual situation to consider how to use the way, there will be other better solutions I did not think of, learning ...