one

1. Pixel. A unit of relative length. Pixel PX is relative to the screen resolution of the monitor. Dots Per Inch (DPI) is a virtual unit of length used in a digital image of a computer system. If you want to convert PX to physical length, you need to specify the precision DPI(Dots Per Inch), which is usually optional during scanning and printing. The default value is 96dpi for Windows and 72dpi for Apple.

The default font height for any browser is 16px.

Unit conversion

By default 16px = 1em = 1 rem

Actual pixels = HTML default pixel units for example 1.5em actual pixels =161.5 = 24px, 3rem = 163 = 48px

2. Characteristics of PX

1. IE cannot adjust font sizes that use PX as a unit; 2. Most foreign websites can be adjusted because they use EM or REM as font units; 3. Firefox can adjust PX, EM, rem, but more than 96% of Chinese netizens use IE (or kernel).Copy the code

3.EM

Em (font Size of the Element) is a unit of font size relative to the parent element.

Em is a unit of relative length. Font size relative to the text in the current object. If the current font size for inline text has not been manually set, it is relative to the browser’s default font size. It was originally the width of the letter M, hence the name em. It is a multiple of the character width, similar to percentage, for example: 0.8em, 1.2em,2em, etc. Usually 1 em = 16 px.

Characteristics of the EM

1. The em value is not fixed; 2. Em inherits the font size of the parent element.Copy the code

Unit conversion

For example: parent element font 16px: 16px = 1 em; 16 px0. 75 = 12 px; 0.75 em = 12 px *

Warm prompt

All untuned browsers fit: 1em=16px. So 12 px = 0.75 em, 10 px = 0.625 em. To simplify font size conversion, declare font size=62.5% in the BODY selector in CSS, This changes the em value to 16px*62.5%=10px, so 12px=1.2em and 10px=1em, which means just divide your original px value by 10 and replace it with em. So when we write CSS, we need to pay attention to two things:

Font-size=62.5%; 2. Divide your px by 10 and replace it with em. 3. Recalculate em values for fonts that have been enlarged. Avoid duplicate font size declarations.Copy the code

In other words, avoid 1.2 * 1.2= 1.44. For example, if you declare a font size of 1.2em in #content, then the font size for p must be 1em, not 1.2em, because this em is different from that em, which is changed to 1em=12px by inheriting the height of the #content font.

4.rem

Rem (font size of the root Element) refers to the unit of font size relative to the root element. Rem is a new relative unit (root EM) of CSS3, which has attracted widespread attention. What’s the difference between this unit and EM? The difference is that when REM is used to set the font size for the element, the font size is still relative, but relative only to the HTML root element. This unit combines the best of both relative and absolute size, allowing you to scale all font sizes by changing only the root element, while avoiding the cascading effect of font sizes being compounded layer by layer.

Unit conversion

Root element font 16 pixels: 16px = 1rem; 16px x 0.75= 12px; 0.75 rem = 12 px

compatibility

Rem is now supported by all browsers except IE8 and earlier. For browsers that don’t support it, the solution is simply to write an additional declaration of absolute units. These browsers ignore the font size set with REM. Here’s an example:

p {font-size:14px; font-size:.875rem; }

Note: The choice of font units is largely up to your project, rem is recommended if your user base is using the latest version of the browser, PX is recommended for compatibility, or both.

For those that only need to be adapted to a few mobile devices and the resolution has little impact on the page, use PX.

For the need to adapt to a variety of mobile devices, use REM, for example, only need to adapt to iPhone and iPad and other devices with relatively large resolution differences.

5.pt

two

1. The current content layout effect suitable for mobile terminal is as follows:

1. Percentage: The width and height of all elements that need to be dynamically adjusted shall be in percentage, and the font size shall be fixed in pixels. 2. Rem: The ratio of device pixel to CSS pixel is obtained through calculation or JavaScript to determine the font pixel of the root element, and then rem setting of all units is carried out according to the font pixel of the root element to determine the size. Base REM changes depending on the device. 3. Vw: take the width of Visual Viewport of the current device as 100VW, and then get the width of unit VW. All elements are arranged in style according to vw. 4.Media Query: Use breakpoints to style devices of different widths.Copy the code

2. The designer gave a 750px design (note that this is 750px and not 375px)

1. The front-end engineer starts the restoration with 750px. 2. Using A font px instead of REM 4.flexible.js automatically determines the size of the entire layout viewport based on DPRCopy the code

3. Rem layout and font processing can be seen from flexible. Js, REM is used in wide high school, which is to ensure equal scale of layout in devices with different width and size.

4. Why use PX fonts instead of REM?

First of all, if you’ve ever used REM units, you’ll notice that rem units have all sorts of weird numbers due to their different sizes. The most obvious ones are more decimal places, such as 13.755px. In browsers, the calculation of decimal points varies from browser to browser, and some font-size values with decimal numbers do not appear clear enough in certain browsers. Second, we want to display the same amount of fonts under the small screen as on the big screen. In addition, if REM is used, due to the existence of equal proportion, there will be smaller fonts on the small screen under the small screen, which is not conducive to our better reading and violates the original intention of adaptation. Therefore, for font adaptation, it is better to use PX and media query for adaptation.

Font-size: 16px; line-height: 20px; “> < span style =” font-size: 16px;

@mixin font-dpr($font-size) {
    font-size: $font-size;
    [data-dpr="2"] & {
        font-size: $font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: $font-size * 3; }}Copy the code

Finally, there are all kinds of online explanations for the difference between responsive and adaptive.

In my opinion, there is no need to make it so complicated. A friend of Zhihu said it in plain English.

Responsivity is an adaptive design for devices with different resolutions, using @media rules as the main means, while adaptive ignores the proportional layout of @media and aims to adapt to different browser window sizes.Copy the code

As a result, we find that today’s large websites, such as Taobao, are no longer responsive. What does that mean?

We will find that taobao mobile and web uses two domain names, that is to say, different clients no longer share the same DOM structure. It’s about differentiating and adapting. It then redirects based on the client type each time the user accesses it.

Why is that?

Just think about taobao, a large website, there are a lot of commodity items under one page, and the DOM structure of each commodity item is very complex, and the INFORMATION displayed on THE PC terminal is often more than that on the mobile terminal. If you do not separate the two sets and use the responsive style directly, a lot of the DOM displayed on the PC side will be hidden on the phone side, so that the DOM is not used, but loaded. In this era of traffic and speed first, code redundancy aside, the extra load of these useless code consumption of traffic, in a sense, has lost a lot of benefit.

Finally, for compatibility reasons, the code we mentioned earlier in the header of this article:

<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
Copy the code

From Chrome32+ onwards zooming will be disabled by default, but in order to be compatible with most devices, other Settings will be added to make the meta tags more fault tolerant. This is the following code:

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