What's the difference between CSS sizes and physical screen sizes?

Question

css

Recently, the realization has come that there are physical and CSS screen sizes, and that the designer, when rendering a site for minimum screen sizes (mobile phones - 320px, tablets - 768px), focuses precisely on CSS sizes.
- What are physical and CSS sizes? What are the differences? And how should a designer understand them?
- Why is it easier for a layout designer to "stretch" the layout to fit a larger width? And what does "stretch" mean?
For example, a designer creates a layout for a mobile version, 320 wide, but the site will already open at different physical resolutions (for example, Iphone 6SE has 1920 px). Stretching doesn't pixelate or blur?
- If we need CSS sizes to render the layout, why do we need knowledge about physical resolutions? To select high-quality images?

Answer 1

What are physical and CSS sizes?

CSS sizes are a figment of your imagination, there are different units that you can use when laying out. They are very different: reading
the physical dimensions is also not quite the right wording. As I understand it, the user has a display size in cm, while the screen extension can be completely different with the same dimensions in cm.
Let's say monitors with fullHD resolution (1920x1080), while on the screen 22 '' and on the screen 32 ' ' The size of the block in cm will be different in reality (measured with a ruler), while in px or in % it is the same. The connecting link is ppi pixel density: read
Same question. And why?
PS: If you are looking for the perfect solution, there is none. The designer and layout designer need to know and understand how graphics behave on different display diagonals with the same extensions. You need to understand what a pixel is, what a centimeter is, what an aspect ratio is, etc. This is a whole science, you can’t describe it in one phrase. There is a lot to read on this subject. I believe that a web designer must have a little knowledge of html and css. It's like a separate profession and a separate specific set of knowledge. Here "I know how to draw in Photoshop" is too little. As for the design of business cards or booklets, you need to understand what CMYK is, what color separation is, what types of printing are available, what types of paper, etc.
The easiest way to understand and master all this is to communicate more with the layout designer, and preferably with a good one. My wife is engaged in design, until she taught css and html received go .. but psd. Because you need to understand what can be done, what is simple, what is more difficult, what will be dynamic, what is fixed. A lot of nuances.

Answer 2

Read about responsive layout and viewports.

Answer 3

https://www.sven.de/dpi/