What is the

1. The CSS pixels

CSS is an indeterminable physical pixel that depends on the type of device it is on.

2. Logical pixels

Device-independent pixels, also called logical pixels, are virtual pixels like CSS pixels. They are pixel units defined by the operating system. Applications tell the operating system of device-independent devices, and the operating system converts the device-independent pixels into device pixels.

3. Device pixels

Displays are made up of countless physical pixels, and by controlling the color of each pixel, different patterns can be displayed on the screen. Device pixels are fixed.

4.DPR

The relationship between device pixels and CSS pixels

Device pixel ratio DPR = Device pixel /CSS pixel

For example, pixel ratio = resolution (number of pixels on the device, for example, 19201080) ➗ Number of independent pixels on the device/number of CSS pixels, for example, 1280610. The iPhone 6 has 750 x 1334 physical pixels, 375 x 667 ideal viewport, and DPR = 2

Break down

Now that we don’t have a clear understanding of CSS pixels and device/physical pixels, please continue to read the explanation below:

A CSS pixel on a PC is represented by a physical pixel

When we write styles, a pixel is called 1px, but is the CSS PX exactly the same as the physical pixel, the same concept? In PC, because the screen is large enough, a CSS to display with a physical pixel, pixels can be completely, PC by default a CSS pixel corresponds to a physical pixel, but find you down the resolution, according to the content of the larger, but the physical display pixels won’t change, This is essentially a CSS pixel for several physical pixels, depending on user Settings.

One CSS pixel on the M-side corresponds to multiple physical pixels

The size of mobile devices is limited, and the resolution is not low, or even higher than that of PC, that is, more physical pixels can be displayed. If the PX of a CSS corresponds to the physical pixels one by one, you can imagine how small the displayed content is. This is certainly not, solve this problem, we can naturally think of, on mobile devices that don’t correspond, a CSS pixels corresponding to multiple physical pixels, so that we would not show the content is too small, mobile devices actually did the same, you write in the development of px and final rendering shows the physical sizes is not one to one, Maybe one px corresponds to two physical pixels, maybe three physical pixels, and the ratio of the number of physical pixels displayed on your device to the number of Pixels in your CSS is called Device Pixel Radio, or DPR for short. Well, that solves the problem of displaying too little content.

The higher the DPR, the better, of course, need 2 times, 3 times map for higher clarity

After the DPR, there is a problem with is the same picture, I set a high number of px wide, so in the DPR of 1 device, and DPR for 2 devices display effect is the same, 1 px on DPR to 1 device with a physical pixels to display, on top of that equipment in the DPR for 2 in 2 * 2 physical pixels to display, In this way, the advantages of high DPR will not be reflected. My device is better than his device, but you give me the same experience. Some users may be unhappy, so we can treat them differently.

Retina Gao Qingbing

A long time ago, there was no difference. If you put a 1px in the CSS, the screen would be rendered as an actual pixel. DPR=1, how simple and natural it was. That means the screen has four or more physical pixel points than a non-HD screen. If displayed according to DPR=1, the area of the same picture displayed on the HD screen will be 1/4 of that of the non-HD screen. In this case, the display area of the picture on the screen will be greatly reduced, which will also lead to the problem of “unclear”. Since Apple has introduced Retina technology, it needs to solve the problem of “DPR=1” on the premise of bringing hd display benefits. How do you solve it? DPR! = 1. Apple uses a number of techniques to render a logical pixel using 4 or more physical pixels, so that the same CSS code Settings look the same size on Retina and non-Retina screens, but are much more detailed on Retina screens. On Tian screens, the DPR is no longer 1, but greater than 1, such as 2 (iPhone 5, 6, 7, 8) or 3 (a series of Plus devices like iPhone 6 Plus) or a non-integer (some Android devices), and may go up.

For example, the iPhone 6 has a DPR of 2

The iPhone 6’s physical pixels already say 750 x 1334, but what about its logical pixels? Just print screen.width and screen.height in Safari on the iPhone 6, and the result is 375 * 667, which is its logical pixels, and from that it’s easy to figure out that the DRP is 2. Of course, we can also get the DRP directly by using the value window.devicePixelRatio, which prints 2, as we expect.

Logical pixels CSS pixels and physical pixels

1px border problem

Led by Apple, Retina technology has become standard on mobile devices, so the front end of the Siege Lion has to face the facts

  1. You want to draw a 1px bottom border, but the screen just shoves you a line 2-3 physical pixels wide.

  2. You can’t manipulate physical pixels as directly as your Android or iOS colleagues can.

1px border problem solution:
  • Border – image image
  • Background – the image gradient
  • The box – shadow, etc
  • Reference: segmentfault.com/a/119000001…
  • Pseudo-element +transform “scales the border; ScaleY (0.5)
  • According to the screen size and DPR, JS is used to accurately set the REM reference value and initial-scale scale value for different screens.

Hybrid development uses REM

Because EM has problems inheriting from parent elements, the inheritance relationships involved when changing font sizes become complicated.

Rem is the size relative to the font size of the root element. If the text size is set to FONT-size: 10px, 1rem = 10px. Setting fonts with REM is much easier.

The width of the mobile device is various, each device of the DPR is different also, in other words, different equipment each row physical sizes, can show the number of px CSS is different also, if we write die px, then the result is the same px, shows the number of lines in different equipment is different, so the whole layout is wrong, Do you have any ideas on how to solve this? If you look at the difference in the width of the device, you might ask, what about DPR, which has nothing to do with DPR at all, imagine two devices that are 1000 physical pixels wide, one with a DPR of 1 and one with a DPR of 2, then one looks like 1000 pixels and one looks like 500 pixels. We don’t perceive DPR here. In fact, it is easy to think that each device displays a different px number in each line. If you write the px number dead, it must display a different effect. Therefore, you can not write dead, to dynamic calculation. You write the style of one device, and then you dynamically calculate the ratio of the width (px) of the other devices.

Rem is the solution to this problem. Rem is not a specific PX, but the number of pixels rem displays is calculated according to the font size of the root element. For example, if you set 1.2 REM and the font size of the root element is 100px, then the element dynamically calculates the px number to be 120px. Set the PX for different widths so that it can be used for all devices.

Methods a

Font size = 100px; font size = 100px;

varRoot element fontsize = actual device width/development-time device width * development-time root element font-sizedocument.documentElement.style.fontSize =
 (document.documentElement.offsetWidth/375) *100 + 'px' ;
Copy the code

Rem is introduced

Rem is a unit of font size relative to the root element (HTML tag).

Core idea: Percentage layouts enable responsive layouts, and REM is the equivalent of percentage layouts.

Implementation method: dynamically obtain the current viewport width, divided by a fixed number n, get the rem value. The expression is rem = width/n.

In this way, the REM size is always n equal to width.

How do I dynamically calculate REM

// Dynamically set the font size for the root element
function init () {
  // Get the screen width
  var width = document.documentElement.clientWidth// Set the font size for the root element. This is 10 equal parts of the width
  document.documentElement.style.fontSize = width / 10 + 'px'
}

// Load the application for the first time
init()
// Monitor the timing of the phone rotation event, reset
window.addEventListener('orientationchange', init)
// Monitor phone window changes and reset
window.addEventListener('resize'Set rem to width no matter how the device's visual window changes1/10.To implement the percentage layout, the above code needs to be written before the DOM (the first script tag can be placed in the head).Copy the code

Add meta tags to mobile devices

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no" />
Copy the code

Not JS dynamic calculation, with CSS dynamic calculation, not reliable

html{
  font-size:calc(100vw/7.5)}Copy the code