How big is 1px?

Let’s start with a few concepts:

A key concept
Device pixels: The number of pixels the device screen actually has generally 1920 pixels in width and 1080 pixels in length.
Logical pixel: The units of CSS pixels (i.e. the CSS PX) that are relative in size, also known as individual pixels


Resolution: Device pixels of screen length x device pixels of screen width (1920 x 1080)


Pixels per Inch (PPI) : Indicates the number of pixels per inch along the diagonal. The larger the pixels are, the more delicate they are

Copy the code
Scale Factor: the magnification ratio of the logical pixel to the device pixelwindow.devicePixelRatioYes, you can use personalization on a PC, but they're not exactly the same

The above concepts are directly related
A relationship between:
Device size x pixel density = resolution (Device pixels)


For example:


The iphone6s has a diagonal length of 5.5 inches, a pixel density of 401 ppi, and a resolution of 1920 x 1080. The device that calculates the diagonal is 2205.5 pixels.


5.5 * 401 = 2205.5


Relationship between the two:


Logical pixel (CSS PX) = device pixel x scaling factor


For example:


The iphone6 has 375 * 667 logical pixels, 750 * 1334 resolution, and a scaling factor of 2


1 logical pixel (1px) = 1/375 of the device width


1 device pixel = 1/750 of the device width

Copy the code
1/375 is 1/750 times 2

Reference above: 1px is exactly how big

The conclusion from the formula

With the same PC resolution, the larger the screen size, the more blurry the display (because the DPI is smaller).

For example:

Our typical desktop computer screen is 32 inches with a 1920 by 1080 resolution. The average laptop is 15.6 inches and has a 1920 x 1080 resolution. Formula 1: When the resolution is the same, the larger the device size, the smaller the pixel density. So a 32-inch desktop looks blurry.

With the same resolution and the same scaling factor, the performance is consistent under different device sizes:

The px page developed on a 24-inch PC can be displayed on a 15.6-inch laptop without any compatibility processing. By formula 2: Since the general PC side, the default scaling factor is 1 (window.devicePixelRatio = 1), the resolution is the same (1920 * 1080), then the ** logical pixel (CSS PX)** is also the same. So if you set 100px on a large screen at the same resolution, it will be 100px on a small screen. They just don’t appear to be the same size, 1px on the smaller screen is even smaller.

How to display PC web pages on mobile phones?

We can adjust the scale of the web page on mobile, and this value is called viewPort. By default, mobile browsers will set the viewPort width to 980px (or 1024px or something else), which means that 1px is 1/980 of the screen width of the device. This has nothing to do with the scaling factor. The 1px is very small and all the elements become very small. The mobile browser does this to show the PC page as fully as possible, and then allows the user to zoom in and out to see details. Obviously, the experience is very bad elsewhere, and many of the smaller elements are hard to see. The second way is that we set a proper scale. Generally we set it like this:

<meta name="viewport" content="width=device-width">
Copy the code

For iphone6, 1px = 1/750 (resolution) * 2 (scaling factor) = 1/375. If our element’s PX value can be dynamically adjusted according to the 1px size, our web page will be perfect. In this case, EM and REM will come in handy.

What is EM?

As mentioned above, in order for our web pages to display properly on devices with different resolutions (mobile), it is best that our element lengths and widths, margins, and margins are all dynamic

A:

As stated above, we generally set this up on mobile:

<meta name="viewport" content="width=device-width; initial-scale=1" >
Copy the code

At this point we know the 1px size, on the iPhone6:1px = 1/750 (resolution) * 2 (scaling factor) = 1/375. Since 1px is fixed, we can only dynamically change the px of an element, such as 120px on iPhone8; On the iPhone6, you need 100px. At this point we can use JS to dynamically calculate, according to the screen size. But obviously it’s a lot of work, you have to adjust the length and width, the inside margins, the margins of every element, and it’s obviously a huge project. The em unit is a unit of relative length based on the font size of its parent element. The default is 16px = 1em. Font-size :16px; child :0.8em. The resulting size is 0.8 * 16 =12.8. When all units are em, all we need to do is change the font size of the body and the width of the other child elements can change dynamically, which is obviously much more convenient.

What is REM?

‘REM’ is a new unit of relative length added to ‘Css3’ to address the shortcoming of EM, which is essentially the font size relative to the parent element, which must be recalculated when the font size of the parent element changes. This problem can be solved with the advent of REM, which is only relative to the root directory, the HTML element. With rem, we only need to adjust the font size of the root HTML element to achieve dynamic adaptation of all elements.

 / * ** = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =* Set the root element to font-sizeFont-size: 16px;X = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =* / (function (doc, win) {  var docEl = win.document.documentElement;  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';   var refreshRem = function () {  var clientWidth = win.innerWidth  || doc.documentElement.clientWidth  || doc.body.clientWidth;   console.log(clientWidth)  if(! clientWidth)return;  var fz;  var width = clientWidth;  fz = 16 * width / 375;  docEl.style.fontSize = fz + 'px';// each portion is 16px, i.e. 1rem=16px  };   if(! doc.addEventListener)return;  win.addEventListener(resizeEvt, refreshRem, false);  doc.addEventListener('DOMContentLoaded', refreshRem, false);  refreshRem();  }) (document.window); Copy the code

conclusion

  1. Logical pixel (CSS PX) = device pixel x scaling factor
  2. In order to better adapt the mobile terminal we introducedemandremThese two dynamic units
  3. emThe size of the parent elementfont-sizeAbout,remThe size of the root elementhtmlthefont-sizeThe relevant
  4. We usually use it on mobilejsDynamically compute the heel nodehtmlthefont-sizeFor adaptive purposes.