The evolution and application of CSS layout units: from pixels to relative units based on the font size of the root element

From px to rem: The evolution and application of CSS layout units

Introduction:
In front-end development, we often need to use CSS to implement page layout . Over the past few years, CSS layout units have evolved and developed. Initially we used pixels (px) as the unit to set the size and position of elements. However, with the rise of responsive design and the popularity of mobile devices, pixel units have gradually exposed some problems. In order to solve these problems, the new unit rem came into being and was gradually widely used in CSS layout.

1. Limitations of the pixel unit (px)
1.1 Fixed size
As the earliest widely used unit, the pixel unit has the characteristic of fixed size in layout. This means that when the page is displayed on different devices or different screen sizes, the size of the pixel unit will not adapt, causing the page layout to be disordered or unable to be displayed completely.

1.2 High-resolution device issues
With the popularity of high-resolution devices, such as Retina screens, the shortcomings of pixel units are more obvious. When elements with low pixel unit settings are displayed on a high-resolution device, it will cause pixelation or blurry display, affecting the user experience.

1.3 Complex editing
The pixel unit needs to be adjusted according to the resolution of the device, which means that the pixel density of different devices needs to be considered when writing CSS, which increases the complexity of writing and maintaining code.

2. Introduction to rem unit
2.1 What is rem
rem is a relative unit, which represents the unit of font size relative to the root element (html). Its size is relative to the font size of the root element. When we set the font size of the root element to 16px, 1rem equals 16px.

2.2 Advantages of rem

• Adaptive layout: Using rem units can be adaptively adjusted according to the font size of the root element, thereby achieving flexible layout changes on different devices.
• Solving the problem of high-resolution devices: Since rem is a relative unit and is not affected by the pixel density of the device, consistent layout effects can be achieved at different resolutions.
• Simplify code writing: Using rem units can simplify code writing, and you no longer need to consider the pixel density of different devices.

3. How to use rem units
3.1 Set the font size of the root element
Before using the rem unit, you need to set the font size of the root element first. Normally, we will set the font size of the root element to 16px, that is, 1rem=16px.

html {
  font-size: 16px;
}

3.2 Using rem units
Once the font size of the root element is set, you can use rem units for layout in other elements.

.container {
  width: 20rem; /* 相当于320px */
  height: 10rem; /* 相当于160px */
  font-size: 1.2rem; /* 相当于19.2px */
  margin-top: 2rem; /* 相当于32px */
}

4. Dynamically change the font size of the root element
4.1 Media query
Through media query, you can dynamically change the font size of the root element according to different screen sizes.

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 18px;
  }
}

4.2 JavaScript dynamic calculation
Use JavaScript to dynamically calculate the font size of the root element based on the screen size.

function setRootFontSize() {
  var screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  var fontSize = screenWidth / 10;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();

window.addEventListener('resize', setRootFontSize);

5. Summary
By using rem units, we can implement responsive layout and solve layout problems on different devices. Using rem units can make our layout more flexible and adaptive, while simplifying code writing. In actual projects, we should choose appropriate layout units according to actual needs and use rem units rationally to achieve a better user experience.

References:

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size
• https:/ /www.w3schools.com/cssref/css_units.asp
• https://juejin.cn/post/6844904117648772110

The above is the detailed content of The evolution and application of CSS layout units: from pixels to relative units based on the font size of the root element. For more information, please follow other related articles on the PHP Chinese website!