This is the fifth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Write in front:

This article serves as a summary of my study, and I will share it with you. If you think these contents are useful to you, please give me a thumbs-up ~ thank you ~

Because the personal technology is limited, if there is any mistake or doubt, welcome to point out or give advice! Thank you very much!

Personal front-end blog site: zhangqiang.hk. Cn

Welcome to join the front-end learning QQ communication group of bloggers: 706947563 (click can directly into, from the QQ official quick code), focus on front-end development, common learning progress!

In this chapter you will learn:

Combine CSS and DIV layouts for a deeper understanding of screen size, resolution, and scaling.

These several small knowledge points, maybe we in daily life, often heard, but what is the meaning, always confused, after many times I experience development, specially summed up as follows (do not underestimate these concepts oh, this can be closely related to our CSS layout development) :

  • The screen size, which is what we usually call the screen size in our daily life, whether it’s 23 inches or 27 inches, is the size that we can see. It’s the diagonal size of the screen, measured in inches.

  • Resolution, usually our computer resolution is 1920*1080 and so on, that is to say, the display will show how many pixels, the more pixels, the screen will be clearer naturally.

For resolution, common examples include the following:

720P has a resolution of 1280×720 pixels

The 1080P resolution is 1920 by 1080 pixels

The 2k resolution is 2560 by 1440 pixels

4K has a resolution of 3840 by 2160 pixels

The 8K has a resolution of 7680×4320 pixels

Div = div; width:50px; height:100px; The word px stands for pixel

  • Screen zoom (to display the size of items such as text, applications, etc.)

You think what you think is what you think? Well, by scaling, I mean this:

Let’s say we give a div 100px width, but we use the pixel measurement tool, huh? ! It’s not 100 pixels, it’s bigger?? Okay, so because of this scaling, it turns the width of the div that we should be displaying at 100%, into 125%. In fact, it’s 100px, and you can change it to 100%.

However, we have some computers that show 125% is more appropriate, so what should we do? Flex layout, units can be given to VW, VH, etc., can also be solved.