The blog linkWelcome to visit ~

I heard that rough working people only rely on PX and % to break the world. I don’t know if you are one of them, haha

It’s been 9102 years, em and REM dominate the world on mobile, and someone always asks you the difference between the two; Vw and VH are also emerging, with increasing supporters; Css3 also has a new calculation function calc(), or CSS variables with JS, really more powerful!

Em and rem

Em and REM are the most popular alternative to flexible, and while it’s gone cold, it’s still the most compatible scalable layout option out there.

In the sense of EM and REM,

  • 1em represents the width of the current element’s font, which is exactly the width of a capital M

  • 1rem represents the width of the default font size, which is essentially the width of a capital M

The only difference between rem and EM is that rem always refers to the font size of the root node (HTML), and EM refers to the font size of the current element.

The essence of flexible scheme is that hack implements dynamic rewriting of tags and tags’ data-DPR attribute and font size value according to DPR of different devices. The result is that the content on the interface is fully proportionally scaled at different device resolutions.

 

Also in units of relative font size are ex and CH, although they are not generally used.

  • 1ex represents the height of a lowercase letter X. But it doesn’t perform as consistently as EM, for example ex is exactly half the size of EM in IE, and closer to the actual font height in Firefox, so we half expect EX ≈ EM / 2.

  • The 1ch represents the width of a digit 0.

 

Their compatibility is as follows

Viewport proportion unit: Vh, VW, vmin, vmax

Four new units related to viewports have been added in CSS3, and over time, current browser environments have followed suit, and these are the most recommended units for scaling currently/in the future. The flexible scheme mentioned above is also a JS hack scheme for low version environment compatible viewport ratio scheme.

  • 1vw represents 1/100 of the viewport width

  • 1vh represents 1/100 of the viewport height

  • 1vmin Take the smaller of 1VM and 1vh

  • 1vmax is the larger of 1VM and 1vh

! The viewport width corresponds to window.innerWdith and window.innerHeight

The current compatibility is as follows:

CSS3 other new features used in conjunction

Let’s look at a couple of cases

1. Calculate with calc()

.box {
    width: calc(100vw - 40px);
    padding: 0 20px;
    box-sizing: border-box;
}
Copy the code

2. Use CSS variables with JS

Switch themes to change variables directly in CSS

function changeTheme (color)
    const docStyle = document.documentElement.style;
    docStyle.setProperty('--theme-color', color);
}
Copy the code
--theme-color: '#fff'

.some-dom {
    color: var(--heme-color);
}
Copy the code

Absolute unit

Of all the absolute units, the most commonly used is px. Why is it so useful? Is it absolute or relative?

Px is an absolute unit in the sense that it is a point (the smallest unit) displayed on the screen. This point has its position, color and other information. However, the physical units of the smallest unit on each screen, 1 pixel, can vary, such as 1px=1mm, 1px=1cm, depending on the device, so it can also be said to be relative units.

 

Other absolute units are:

  • mmmm
  • cmcm
  • inInches (2.54 cm)
  • ptPound (1/72 inch)
  • pc12 point type (1 PC equals 12 points)

Generally these absolute units are used to print the size requirements for a class of real matter

conclusion

In actual projects, we can not and should not only use a single unit to deal with all the details, fully understand the significance of each unit, reasonable combination is the best.

Scaling layout is not a panacea. It is lazy to make iPad and iPhone display exactly the same scaled content. How to design a combination of adaptability and responsiveness should be considered from the beginning of the design of the product line.

Em scheme and VXX scheme always from the design of px conversion to units, the actual development of fine adjustment or rely on PX, and finally to convert the past, it is better to directly standardize the design draft, do a good job of code conversion plug-in, code all use PX, process to solve the problem of units.

The resources

  • Talk about the adaptation of the mobile page
  • <length> in MDN