Desktop web page size design
To write a UI design specification recently, first study the size issues in web design.
1. Resolution
The size of the web design is mainly related to two factors. One is the resolution of the computer monitor and the resolution of the browser. Actually, there are some operating systems, Windows or Mac OS or others. What is the resolution, say 1024 x 768, which is 1024 pixels in the horizontal direction and 768 pixels in the vertical direction. The entire screen can be viewed as a chessboard. The screen size is 14 inches or 15 inches. Will not change, the computer is how big it is, the change is the resolution of the computer settings, if the same size of the screen, the greater the resolution the more detailed the picture, such as my computer, as shown below:
The first one, with a resolution of 800×600, obviously, the icons become particularly large and blurry. The second one is 1920×1080, which seems to be appropriate because my computer’s resolution is this, and how many computers are. It refers to the diagonal length of the screen, and if the two devices are 19 inches, the 16:9 and 4:3 screens are not the same, and the 4:3 is larger.
In this popularization of a little knowledge, inch and inch conversion, inch is British, inch is Chinese, 1 inch = 2.54 centimeters, 1 inch is equal to 3.3 centimeters, 1 inch = 0.762 inch.
2. Effective viewable area
Current popular screen resolutions are 1024×768, 1366×768, 1280×800, 1280×1024, 1440×900, 1600×900, 1920×1080 and so on. When designing a webpage, consider the resolution of the browser. The main browsers include IE, Google, Firefox, and Opera.
What is the browser’s effective viewable area, where I understand the display content, such as opening a web page, removing the browser’s toolbar and sidebar, etc., where the real content is displayed, as shown below:
The browser on my computer is IE11. The effective visible area is the red box. Each browser has its own different effective visible area, as shown in the following table.
800 × 600 has not been considered, the mainstream is 1024 × 768, and now the main browser is still dominated by IE, so when designing the width of the Web page is conservative or consider 1003px, at a resolution of 1024 × 768, 1003 is the width of the effective view area of IE browser, but now more and more widescreen is gradually occupying the market, so I personally recommend the use of 1280 or 1366, the effective visual area is calculated according to IE, 1280 is 1259 , 1366 is 1345, if you encounter other resolutions, you can do adaptive adjustment, and now more and more web design width is not fixed, this is a popular trend
