Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to apply px, em and rem". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and go deep into it slowly to study and learn "how to apply px, em and rem" together.

How big is 1px?

Let's start with a few concepts:

key concepts

Device pixels: The actual pixels of the device screen are generally: 1920 pixels in the width direction and 1080 pixels in the length direction.

Logical pixel: CSS unit of pixels (px of css we're going to discuss this time), whose size is relative, also known as an individual pixel

Resolution: device pixels of screen length × device pixels of screen width (1920 * 1080)

ppi (pixels per inch): pixel density, indicating the number of pixels per inch along the diagonal (unit is dpi), the larger the finer the display

Scale Factor: The magnification ratio of logical pixels relative to device pixels, which can be obtained through ` window.devicePixelRatio `. It can be set by personalizing on pc, but the two are not exactly the same.

The above concepts are directly related

Relationship 1:

Device size × pixel density = resolution (device pixels)

Examples:

The iPhone 6s has a diagonal length of 5.5 inches, a pixel density of 401 ppi, and a resolution of 1920 * 1080. The calculated diagonal device pixels are 2205.5.

5.5 * 401 = 2205.5

Relationship 2:

logical pixel (px of css) = device pixel x scaling factor

Examples:

iphone6 logical pixel is 375 * 667, resolution is 750 * 1334, scaling factor is 2

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

1 device pixel = 1/750 of the device width

1/375 = 1/750 * 2

Conclusion from Formula

In the case of the same PC resolution, the larger the screen size, the more blurred the display (because the dpi is smaller).

Examples:

Our desktop screens are typically 32 inches in size with a resolution of 1920 * 1080. The average notebook is 15.6 inches, and the resolution is also: 1920*1080. Formula 1: When the resolution is the same, the larger the device size, the smaller the pixel density. So the 32-inch desktop looks a little fuzzy.

Example of consistent performance under different device size with the same resolution and zoom factor:

Usually we develop web pages written directly on a 24-inch pc (px), and without any compatibility processing, they can also be displayed normally on a 15.6-inch laptop. Formula 2: Because the general pc side, the default scaling factor is 1 (window.devicePixelRatio = 1), the resolution is also the same (1920 * 1080), then the obtained ** logical pixel (px of css)** is also the same. So if you set 100px on a large screen computer, it's 100 px on a small screen computer, with the same resolution. It's just that they don't show the same size, and the 1px on the small screen is smaller.

How to display pc web pages on mobile phones?

We can adjust the scale of the page on the mobile side, and this value is the viewport. By default, mobile browsers set the viewport width to 980px (or 1024px or something else), which means 1px = 1/980 of the device's screen width. This has nothing to do with scaling factors. At this point 1px is very small, all elements become very small, mobile browsers do this, is to display the PC side of the web page as complete as possible, and then allow users to zoom to see details. Obviously, the experience was particularly poor. Many of the already small elements could not be seen clearly. The second way is that we set an appropriate scaling. Usually we set it this way:

Then for iPhone 6 according to the formula: 1px = 1/750 (resolution)* 2 (scaling factor)= 1/ 375. Obviously a lot larger than just 1/980, then if our elements are still set according to the original px, then the screen must not be displayed, at this time, if the px value of our elements can be dynamically adjusted according to the size of 1px, our web page is perfect, then em,rem will come in handy.

What is em?

As mentioned above, if we want our web pages to display properly on different resolution devices (mobile), it is best that our element width, outer margin, inner margin, etc. are dynamic.

Method 1:

As mentioned above, we generally set it like this on the mobile side:

At this point, we know the size of 1px, which on iPhone 6 is: 1px = 1/750 (resolution)* 2 (scaling factor)= 1/ 375. Since the size of 1px is fixed, we can only dynamically change the px of an element setting, such as 120px on iPhone 8 and 100px on iPhone 6. At this time we can use js to calculate dynamically, depending on the screen size. However, it was obviously very troublesome. The width, padding and outer margin of each element needed to be adjusted. This was obviously a huge project. At this time we can use the em unit, the em unit name is the relative length unit, is based on its parent element font size to calculate, generally by default: 16px = 1em. If parent font-size:16px, child margin:0.8em. The resulting size is:0.8 * 16 =12.8. When all units are em, we only need to change the font-size of the body, then the width of other elements can be dynamically changed, obviously much more convenient.

What is rem?

'rem' is a relative unit of length added to 'css3' to address the shortcomings of em, which is said to be the font size relative to the parent element and has to be recalculated when the font size of the parent element changes. The problem can be solved by the presence of rem, which is only relative to the root directory, i.e. HTML elements. With rem as a unit, we only need to adjust the font-size of the root html element to achieve dynamic adaptation of all elements, and attach a common adaptation code:

/**

* ================================================

* Set root element font-size

* When the device width is 375(iPhone6), the root element font-size= 16px;

× ================================================

*/

(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';//so each serving is also 16px, i.e. 1rem=16px

};

if (! doc.addEventListener) return;

win.addEventListener(resizeEvt, refreshRem, false);

doc.addEventListener('DOMContentLoaded', refreshRem, false);

refreshRem();

})(document, window);

Thank you for reading, the above is "how to apply px, em and rem" content, after the study of this article, I believe we have a deeper understanding of how to apply px, em and rem, the specific use of the situation also needs to be verified by practice. Here is, Xiaobian will push more articles related to knowledge points for everyone, welcome to pay attention!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.