This is the 18th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Rem and vw

Rem as opposed to HTML elements, the R in REM refers to the root element.

html {
    font-size: 22px;
}
Copy the code

So a rem is 22px in the code above; 0.5rem is 11px; If font size is 10px, a rem is 10px; Rem render sizes are not always integers, 1.25rem on a 375px width screen is 20px; But for a 414px screen, it’s 22.5px; Non-integer sizes occasionally cause some rendering problems.

Viewport relative units refer to units of viewport size relative to the browsing area. We have 4 units. Vw is the percentage of viewport width. Vh height percentage. Vmin is vw or vh, the smaller one. Vmax is vw or vh, the larger value. The commonly used unit is VW. 100VW represents the width of a viewport. In mobile browsers, the viewport is equal to the pixel width of the phone.

Touch-action property is a CSS property closely related to gesture touch transferred to you by the mobile terminal. There are two received values, namely Manipulation to cancel the click delay of 300ms. Indicates that the browser only allows scrolling and continuous zooming. Non-standard operations such as double-clicking to zoom are not allowed. When we set touch-action: Manipulation, the double click behavior was cancelled, and the 300ms delay did not exist. Error: Do not threated as passive.

html {
    touch-action: manipulation
}
Copy the code

In addition to the above two common attribute values, there are other attribute values. Auto Default value, used to indicate that gesture manipulation is completely up to the browser. Pan-x is used to support the movement of fingers horizontally. Pan-y is used to support vertical movement of fingers. Pan-left is used to support operations that can be restored from the right after the start. Pan-right is used to support the movement of fingers to the right and then to the left. Pan-up is used to indicate that the fingers move up and then go down again. Pan-down is used to support the operation of moving the fingers down and then recovering them up. Pinch-zoom is used to zoom the page with your fingers. Pan-x, pan-left and pan-right can be used as a group, pan-Y, pan-up and pan-down can be used as a group, and Pan-Zoom can be used as a separate group.

The image-set() function can display different background or mask images based on the screen density or resolution of different devices. The scenarios used are scenarios where different screen densities show completely different graphs and where user experience and traffic benefits are obvious.