[optimal web page width and its implementation] [recommended collection "

Hello everyone , I meet you again , I'm the king of the whole stack .

1.

When designing a web page , Determining the width is a very distressing thing .

With minifun.cn For example , according to Google Analytics The statistics of , More than half a year , The screen resolution of visitors is 81 Kind of . The minimum resolution is 122×160, This should be a mobile phone ; The maximum resolution is 3360×1050, God knows what equipment it is .

A web page should be on all kinds of screens with such great differences in size , All present satisfactory results , You can imagine the difficulty . for instance , a sheet 400px Wide picture , stay 800px Will occupy 50% Width , And in the 1920px On the screen （Windows Vista Popular settings for ）, Only occupy 20%.

2.

at present , The common screen resolution width is about 6 Kind of ：800px,1024px,1280px,1440px,1680px and 1920px. among ,1024px Most common , But with the popularity of large screen displays , Higher resolution is becoming more and more .

There are two common solutions ：

The first one is ： use javascript According to different client resolutions , choice css Stylesheet file , See here for specific measures . The second kind ： Use flexible layout （Fluid Width Layout）, Realize the adaptability of web page width .

The advantage of the first method is , According to different screen resolutions , Adopt a completely different layout , The disadvantage is to design and maintain multiple style sheets , More trouble . The second method uses only one stylesheet , It's easier .

The following is based on css-tricks The solution on , Discuss how to implement the second method , It's actually very simple .

3.

First , The default width of the web page , Determined to meet 1024px Wide display . It's not just because 1024×768 Is now the most common resolution , Also because this width is most suitable for web pages ：1） It can hold enough content , Enough layout for three columns ;2） Single line text should not be too long ,1024px It's the limit , Otherwise, it is easy to produce reading fatigue ;3） Under the current Internet bandwidth , It is difficult for web pages to use large-scale images required by large resolution .

secondly , The width of the page will be 780px-1260px Within the scope of , Automatic change , That is, the minimum is not less than 780px, No more than 1280px.

Last , For greater resolution , The content of the web page will be automatically centered .

4.

The following is CSS The way a document is written , as long as 4 That's ok . It should be noted that , These lines of statements are for the entire page , namely body Label or the outermost one div Area .

margin: 10px auto;

This line ensures that the web page is at any resolution , Will be centered .

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

These two lines specify the minimum and maximum width of the web page . Be careful ,IE6 These two lines are not supported , That is, they are IE6 Is invalid .

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

This line is aimed at IE6 Solutions for . It USES a CSS expression , It can also be done through javascript Realization .

in addition , If you want to make each block in the inner layer automatically scale , Their width can be expressed as a percentage , such as ：

#div-left{ width:50%; } #div-right{ width:50%; }

Please check here for the final effect and source code download . By changing the size of the browser window , You can find the webpage in 780px-1260px It will automatically expand and contract within the range of .

5.

Last , It is recommended that you use computers at ordinary times , Don't blindly adopt high resolution , It doesn't make much sense .

（ End ）

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/120847.html Link to the original text ：https://javaforall.cn