web page design size specifications

#The size of web design is mainly related to two factors, one is the resolution of the computer monitor and the resolution of the browser.

Under 800×600, if the width of the web page is kept within 778, there will be no horizontal scroll bar, and the height will depend on the layout and content.

Under 1024×768, the width of the web page is kept within 1002. If the full frame is displayed, the height is between 612, and there will be no horizontal scroll bar or vertical scroll bar.

Recommended related articles:
1.A summary of commonly used CSS naming conventions, very practical (collection) ​
Related video recommendations:
1.Jade Girl Heart Sutra Series: Front-end Introduction_HTML5

Recommended: web size specifications

1. Resolution

The size of web design is mainly related to two factors. One is the resolution of the computer monitor and the resolution of the browser. In fact, there are also some operating systems, Windows Or Mac os or other. What is resolution? For example, 1024×768 means there are 1024 pixels horizontally and 768 pixels vertically. The entire screen can be regarded as a chessboard. Is the screen size 14 inches or 15 inches? This size It won't change. The size of the computer is the same. What changes is the resolution set by the computer. If the screen is the same size, the larger the resolution, the finer the picture.

2. Effective viewable area

The more popular screen resolutions are 1024×768, 1366×768, 1280×800, 1280×1024, 1440×900, 1600×900, 1920×1080 etc. When designing a web page, you must consider the resolution of the browser. The mainstream browsers include IE, Google, Firefox, Open, etc.

What is the effective visible area of ​​​​the browser? In my understanding, it is the place where the content is displayed. For example, after opening a web page, remove the browser's toolbar and sidebar, etc., and the place where the content is actually displayed.

Each browser has its own different effective visual area, as shown in the following table:

Interface parameters and shares of mainstream browsers:

# 132 Px # 1%IE Browser35%28%                                                                                                                                                    #                                                                              

Browser

Status bar

Menu bar

Scroll bar

Market share (domestic)

                                                                                                                                                                                      

20 Px

# 15 Px

##                  

24 px

#120 px

                                                                                                                                                                           

# 15 px

5%

System resolution statistics:

##ResolutionOccupancyResolution Occupancy15%13%11%5%##1280×8001280×10241680×1050320×480##480×800Web page width and first screen height:

1366×768		1440×900
1920×1080		1600×900
4%		3%
2.8%		2.4%
2%	1280× 768	1%

The above is the detailed content of web page design size specifications. For more information, please follow other related articles on the PHP Chinese website!