preface

In the course of learning, I discovered that CSS has many dimensions that can describe units. Px, EM, REM, VW and so on. I didn’t dig into it because I didn’t have time and it was a low priority in my study list. I’ve been trying to get to the bottom of it, delaying it until now. Now take a moment to sort it out and understand it thoroughly.

CSS length unit

• A unit of absolute length. Absolute units of length are expressed as a fixed value that does not change.Bad for page rendering.
  • In,”
  • The cm,
  • Mm, mm
  • pt
  • pc
• A unit of relative length. Its units of length vary with its reference value.
  • Px, pixel
  • Em, the font height of the element
  • The percentage %,
  • Rem, the font size of the root element
  • Vm, window width, 1vw= 1% of window width
  • Vh, window height, 1vh= 1% of window height

Physical pixels (device pixels)

Let’s say I have an image, subdivide, and the smallest unit is pixels. That is, an image is made up of many pixels. Pixels are small squares that have a specific location and assigned color values that determine what the image looks like.

As soon as a device is produced, their pixels are determined. The iPhone5 has a resolution of640x1136px, which means the screen consists of 640 rows and 1136 rows of pixel cubes.

To understand pixels and avoid confusion with CSS pixels, think of physical pixels as physical cubes. For example, the iPhone5 has 640X1136px pixels, which can be considered 640 by 1136 squares.Copy the code

The resolution of the

Also called resolution, resolution. It can be classified from two directions of display resolution and image resolution.

• Screen resolution. It is the precision of the screen image, which refers to how many pixels the display can display, that is, how many small squares the display can display.
  • The more squares a monitor can display, the more detailed the picture, and the more information can be displayed in the same area of the screen
  • The entire image can be thought of as a large checkerboard, and resolution is represented by the number of points where all the longitude and latitude lines intersect. The more squares there are, the more pieces you can put on the board.
  • In the case of a certain display resolution, the smaller the display screen, the clearer the image; conversely, when the display size is fixed, the higher the display resolution, the clearer the image. (With the same number of squares, the smaller the display, the sharper; When the screen is the same size, the more squares, the clearer the image.)

CSS pixel px.

The units of CSS pixels are also called px. It is the basic unit of image display. It is neither a definite physical quantity, nor a point or a small square, but an abstract concept. So be aware of the context when talking about pixels!

• To ensure a consistent reading experience, the CSS can be automatically adjusted across devices. That is, a piece of code can be displayed across devices of different sizes with a consistent reading experience.
• By default, a CSS pixel should be the width of a physical pixel.
• But on high-ppi devices, CSS pixels are even the size of multiple physical pixels by default. For example, the screen of the iPhone will look more detailed and clear than the screen of the average mobile phone.
• Pass in the browserctrl +/-You can expand or shrink the screen, which is actually the screen resolution down/up.ctrl +The screen enlarges and the resolution decreases.
• The iPhone6,7, and 8 are all 2x phones, where one CSS pixel equals two physical pixels. IPhone6Plus is a triple-screen phone, one CSS pixel is equal to 3 physical pixels.
• Take iPhone6 as an example, the design draft gives a picture of 40*40 width and height. In real development, divide by 2, and write the width and height as 20×20. Because the iPhone6 is a two-screen phone.

em

Em is a unit of relative length. Font size relative to the text in the current object. If the font size of the text in the line is not set manually, the font size of the browser is 16px.

• So, 1em = 16px. By default.

How can YOU use EM effectively

• Font-size :62.5% Global declaration1em = 16px * 62.5% = 10px
• And then you can putemAs apxUse. And of course at this point,1em = 10px
• If it’s in the parent containerfont-size:20pxSo what’s in the subcontainer1emIs equal to20px.

rem

Rem units are HTML elements relative to font size, also known as root elements.

html { font-size: 10px; /* Font-size: 62.5%; There is a deviation in IE 9-11, which is shown as 1rem = 9.93px. */ } .sqaure { width: 5rem; /* 50px */ height: 5rem; /* 50px */ }Copy the code

Em and rem

• Rem is the font size relative to the root element (HTML), while EM is the font size relative to its parent element.
• Em is at most the last three decimal places

<style> html{ font-size: 20px; } body {the font - size: 1.4 rem; /* background-color: RGB (255,255,255); } div{padding: 1em; /* 1em = 28px */ } span{ font-size:1rem; /* 1rem = 20px */ padding: 0.9em; /* 1em = 18px */ } </style> <html> <body> <div> <span></span> </div> </body> </html>Copy the code

In the above example, an interesting observation was made. Em inherits the font size of the parent element, making it easy to mess up font sizes. So rem will be better in the future.

rpx

RPX is a unit of size for wechat applet to solve adaptive screen size. Wechat mini program specifies a screen width of 750rpx.

Whether on iPhone6 or other models, the screen width is 750rpx. Take iPhone6 for example, the screen width is 375px. After dividing it into 750rpx, 1rpx = 0.5px = 1 physical pixel.

Vw and vh

• vw, window width, 1vw= 1% of window width
• vh, window height, 1vh= 1% of window height
• If the height of the browser is 900px,1vh yields a value of 9px. Similarly, if the display window width is 750px,1vw gives a value of 7.5px.

Vmin and vmax

• Vmin and vmax are the minimum or maximum values between the height and width of the viewport.
• If the height of the browser is 1100px and the width is 700px, 1vmin is 7px and 1vmax is 11px
• If the height of the browser is 800px and the width is 1080px, 1vmin is 8px and 1vmax is 10.8px
• Vmin is the smaller of the width and height /100
• Vmax takes the greater of the width and height /100

Where you can use it

• An element that is always visible on the screen. This effect can be achieved with a height and width of less than 100 vmin values.
• A square that always covers the visible window (always touching all four sides of the screen)

.box {
    height: 100vmax;
    width: 100vmax;
}
Copy the code

Refer to the article

The concept of pixels in front-end development

This section describes the most comprehensive CSS dimension units

Unit mobile device resolution common in CSS3 (finally figured out why the mobile design is always 640px and 750px)

There are a few CSS units you need to know about

My blog

Welcome to my blog to share some technical articles and learn about the front end.