The relationship between device resolution and CSS pixels

Recently in the mobile layout of the flop, Baidu around the blog what, finally, the resolution and the relationship between CSS pixels to re-understand a bit, and then hurriedly write a job, let pass the great god check and check.

Device resolution and CSS pixels themselves are not the same thing, the first CSS is for the web, everything is not from the browser. The difference rate is for the device (computer, mobile phone), but because their units are PX, so it will be confusing. But watching a number of articles, found a lot of talk too complex, will always pull the PPI,DIP,DP and other English, see the end always forget what these refer to.

The device has physical pixels and independent pixels, the physical pixels are the resolution, and the independent pixels remain the same as the CSS pixels.

For example, if a phone has a resolution of 1920*768, then his independent pixel might be 320px, so you have a CSS layout with a 320px-size Div, which is full-screen wide. Different devices have different independent pixels, while the average PC independent pixel is consistent with the physical pixels (resolution), and the phone side is not the same. This will involve a devicepixelratio, which is the ratio of the physical pixels of the device to the independent pixels. Here, it seems to prove one thing, that is, independent pixels (resolution) and CSS pixels do not have a half-dime relationship, layout as long as the device independent pixels to consider OK.

<meta name= "viewport" content= "width=device-width" > This tag just makes the default width of the browser (980px without definition) consistent with the device independent pixels, with this label, It is not easy to get independent pixels, and the layout of the mobile side has a control.

The relationship between device resolution and CSS pixels