Home >Web Front-end >HTML Tutorial >Mobile terminal development, several CSS unit properties you may not know. _html/css_WEB-ITnose
Mobile terminal development, several CSS unit properties you may not know. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:42:401224browse
1. rem
The "em" unit is commonly used in our development. It means to set the size of the current element based on the unit size of the parent element of the current element. ;The "r" in "rem" represents "root", which means that the unit size of the current element is set based on the unit size of the root (i.e. "html") element, so regardless of whether the current element is any child node, once the unit is set If the size is "rem", then the size of this element is based on the root element unit. Both "em" and "rem" here are inherited.
2. vw and vh (personal favorite unit attributes for mobile development, and the focus of this introduction)
In traditional responsive development, we often Layout using percentages, however, is not the best solution. For example, you can't set a percentage based on the body's height.
The full name of "vw" is "viewport width", which is the width of the window; the full name of "vh" is "viewport height", which is the height of the window.
1vw = viewportWidth * 1/100; 1vh = viewportHeight * 1/100;
So the element uses "vw" "vh" as the width and height unit, which can ensure that it adapts to different equipment.
3. vmin and vmax
"vmin" is the smallest one between the "viewport" width and height. (In other words, if the current element unit is set to "vmin", the browser will determine the width and height, and then inherit the smaller value)
"vmax" In the same way, inherit the width and height comparison, the larger value That value; that is, whoever has the larger width or height will inherit the value of the larger.
Here we assume: the width of the browser is 1300px and the height is 960px;
50vmin = 960 * (50/100);
50vmax = 1300 * (50/100);
4. ex and ch
These two units are rarely used in our daily development, so we will not go into details here. elaborated. Here is a picture explaining the meaning of these two units. If you are interested, you can check the information yourself.