Optimal web page width and its compatible implementation method

The following article will discuss how to implement the second method based on the solution on css-tricks, which is actually very simple.

3.

First, the default width of the web page is determined to meet the display width of 1024px. This is not only because 1024x768 is the most common resolution now, but also because this width is most suitable for web pages: 1) It can accommodate enough content, enough for a three-column layout; 2) A single line of text should not be too long, 1024px is the limit, otherwise it is easy to cause reading fatigue; 3) Under the current Internet bandwidth conditions, it is difficult for web pages to use large-size images required by large resolutions.

Secondly, the width of the web page will automatically change within the range of 780px-1260px, that is, the minimum is not less than 780px and the maximum is not more than 1280px.

Finally, for larger resolutions, web content is automatically centered.

4.

Here is how to write a CSS file, just 4 lines. It should be noted that these lines of statements are all for the entire page, that is, the body tag or the outermost div area.

margin: 10px auto;

This line ensures that the web page will be centered at any resolution.

min-width: 780px;
max-width: 1260px;

These two lines specify the minimum and maximum width of the web page. Note that IE6 does not support these two lines, that is, they are invalid in IE6.

width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");

In addition, if you want the inner blocks to automatically expand and contract, their widths can be expressed in percentages, for example:

#div-left{
width:50%;
}

#div-right{
width:50%;
}

The final result and source code download can be found here. By changing the size of the browser window, you can find that the web page will automatically scale within the range of 780px-1260px.

5.

Finally, it is recommended that you do not blindly use high resolution when using computers, as it is not very meaningful.