Fixed-width elastic layout (to adapt to various resolution rates)

Best Web page width and its implementation-learn about it for beginners 1.
Determining the width of a webpage is a matter of annoyance.

Taking minifun.cn as an example, according to Google Analytics statistics, there have been 81 screen resolutions for visitors over the past six months. The minimum resolution is 122x160, which should be the mobile phone; the maximum resolution is 3360x1050.
A webpage must have satisfactory results on various screens with such disparity in size, and the difficulty can be imagined. For example, a 50% PX image occupies 20% of the width on a PX screen, while a PX screen (Windows Vista's popular setting) only occupies.
2.
Currently, there are 6 common screen resolution widths: 800px, 1024px, 1280px, 1440px, 1680px, and 1920px. Among them, 1024px is the most common, but with the popularity of Large Screen Display, higher resolution is becoming more and more.
There are two common solutions:

First, use javascript to select a css style sheet file based on different client resolutions.
Second, Fluid Width Layout is used to adapt the webpage Width.

The advantage of the first method is that it can adopt completely different la s based on different screen resolutions. The disadvantage is that it is troublesome to design and maintain multiple style sheets. The second method uses only one style table, which is easier to use.
Next we will discuss how to implement the second method based on the solutions on css-tricks, which is actually very simple.

3.
First, the default width of the webpage is determined to be a display with a PX width.This is not only because 1024x768 is the most common resolution, but also because the width is the most suitable for the webpage: 1) It has enough content and enough layout for three columns; 2) A single line of text should not be too long, and 1024px is the limit; otherwise, reading fatigue may occur. 3) in the current Internet bandwidth conditions, it is difficult for webpages to use large-size images with high resolution requirements.
Second, the webpage width will automatically change within the 780px-1260px range.That is, the minimum is not less than 780px, and the maximum is not more than 1280px.
Finally, for a larger resolution, the webpage content is automatically centered.
4.
The following is how to write a CSS file. There are only four lines. Note that the statements in these rows are for the entire page, that is, the body tag or the div area of the outermost layer.

Margin: 10px auto;

This line ensures that the webpage is centered at any resolution.

Min-width: 780px;
Max-width: 1260px;

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

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

This line is a solution for ie6. It uses CSS expressions or javascript. In addition, if you want to automatically scale each block in the inner layer, their width can be in the form of percentages, for example:

# Div-left {
Width: 50%;
}
# Div-right {
Width: 50%;
}

By changing the browser window size, you can find that the webpage is automatically scaled within the 780px-1260px range.
5.
Finally, we recommend that you do not blindly adopt high resolution when using computers, which is of little significance.
(End)