CSS Unit Detail: How to select the most appropriate measure?

In CSS, the selection of the units directly determines the web page on different devices Response capacity and Accessibility 。 We have divided the units into two main categories: absolute and relative.

1. Absolute units (Absolute Uniteds)

px (Pixels): Most commonly used units. It's relative to the monitor screen resolution. In modern pages, 1 px is usually defined as 1/96 inches.
pt (Points): Traditional printing unit, 1 pt = 1/72 in. Always uses printing styles.

2. Relative Units - Responsive Core

rem (Root em): Font size relative to root element (html). It's currently built on a responsive layout. Preferred Unit , because it ensures that the user adjusts the browser font for a large number of hours and that the entire page is scaled.
em: Font size relative to the current element or its parent element. Fits to auto-spacing (e.g. padding, margin）。
vw / vh (Viewport Width/Height): Compares to the viewer size. 1vw equals 1% of the width of the view. is very well suited to the full screen background or to the current title.

3. Specific issues addressed: PX Turn REM ' s Pain

Many designers are still used to delivering their drafts in pixels (px) (e.g. 1920 px width). Developer needs to convert it to rem To achieve flexible layouts. If root font is 16px Well, then... 32px The corresponding one is... 2rem 。 This tool will help you to complete these calculations in a moment and provide an accurate formula for conversion.

4. Recommendations for best practices

Yes. Spacing and Size , recommended for use rem ； Yes. & Small Border , it is suggested to retain px ； Yes. Streaming , can try clamp() Function combination vw 。 Always remember, the unit is chosen to get the page on a 4-inch phone and 32-year-old phone. It's a perfect reading experience on the monitor in inch.