Learn about mobile-side development

Learn about mobile-side development

What makes the mobile side develop? This is the development of Web pages on mobile devices such as mobile phones. This article will focus on some basic concepts as well as REM adaptation scenarios, which are now more popular for mobile adaptation through REM.

Part I: Basic concepts

Physical pixels: This is the smallest display unit that can be controlled on the screen, such as the smallest unit of display color.

CSS pixels: This is the pixel we use in CSS when we design our web page, for example: border:1px black solid, where the 1px is CSS pixels, which is actually the device independent pixels we're going to cover below.

Device independent pixels (density-independent pixel): device-independent pixels become density-independent pixels, independent of devices, such as CSS pixels, which can be converted to physical pixels. Device-independent pixels are also known as device-independent pixels (device-independent pixel, abbreviated dips), and a simpler understanding is: device-independent units used to measure pixels logically.

Device pixel ratio: that is, the physical pixel/device independent pixel = device pixel ratio (devices pixel ratio), the device pixel ratio of English is DPR, We can get the DPR of the current device through Window.devicepixelratio in JavaScript. So what about the device pixel ratio? The key to this problem boils down to this: 1px in CSS is not equal to 1px in the device. That is, physical pixels and device independent pixels are not the same. In the previous mobile device, such as IPHONE3, its resolution is 320x480 (this resolution is very low), a CSS pixel (device independent pixels) is really equal to a screen physical pixels, at this time the DPR is 1, but with the development of technology, mobile device pixel density (described below) is getting higher, Starting with the IPhone4, Apple launched the Retina screen, which has been significantly improved in terms of the size of the screen without changes, which means that the physical pixels are a little more than the same size on the screen, and the CSS pixels have not changed. So a CSS pixel is equal to two physical pixels, at this point the DPR is 2. Now the standard PPI is rarely seen, mostly retina retina devices, for example, iphone5s device pixel ratio of 2,iphone6s device pixel ratio is 3. (Note: The Retina Retina screen is an ultra-high-density screen with a PPI value of more than 300, but Apple has given it a big name). You can see the DPR of more devices in the Http://DevicePixelRatio.com website.

　　

Pixel density (PPI): That is, pixel per inch, the PPI is the pixels per inch (physical pixels), the higher the PPI value, then the more pixels in the unit in the display screen, so the better the picture, the PPI is actually pixel density (pixel Density). So what does the PPI figure out? Look at the following formula:

　　

For example, IPhone6 Plus has a pixel resolution of 1920x1080 and a screen size of 5.5 inches (diagonal) to get a PPI equivalent to about 401.

Part II:

　　

　　

　　

Learn about mobile-side development