When it comes to CSS units, we should first think of the PX, that is, pixels, we are generally used in the page layout px, but in recent years, adaptive page layout More and more, EM and percentages are often used. Then with the popularity of mobile phones, web apps and hybrid app development, all use the CSS3 technology, in the CSS3, a lot of new units, REM, VW and VH, vmin and Vmax, CH and ex, and so on, now do a detailed introduction to these units.
1, EMDo the front-end should be not unfamiliar to EM, not what rare unit, is the relative unit,
This technique requires a reference point, which is generally based on the "font-size" of <body>. For example, we use "1em" equals "10px" to change the default value "1em=16px", so that when we set the font size equivalent to "14px", we only need to set its value to "1.4em". Front-end Development predecessors summed up an experience
body {font-size: 62.5%;}
So, after this 1em = 10px in the layout and so on when the use of good conversion of a lot.
2. PercentagePercentages believe that we will not be unfamiliar, the percentage is generally broadly speaking relative to the parent element, but not very accurate.
1, for the general positioning element is our understanding of the parent element
2. For Position:absolute, the element is relative to the positioned parent element (offset parent)
3. For position:fixed, the element is relative to ViewPort
Viewport: The visual window, which is the size of the browser windows.
Exceptional cases1, the use of padding, margin, etc., the actual percentage and the percentage you want is different. (For this, one of the workarounds is that we can use the CSS3 calc () attribute, specifically, you continue to look down and I'll explain at the end of the article.) ）
2, line-height percent of some cases, usually the result is a percentage calculated value. (For this, please keep looking down ...) ）
3. remREM is relative to the root element
So we're going to set the 16px font for the P tag in HTML, font-size settings. 16rem can be, here 16px=.16rem.
What is the difference between this unit and EM?
The difference is that when you use REM to set the font size for an element, it is still relative size, but relative to the HTML root element. This unit is a combination of relative size and absolute size of the advantages in one, through it can only modify the root elements in proportion to adjust all font size, but also to avoid the size of the font-layer composite chain reaction. Currently, in addition to IE8 and earlier versions, all browsers support REM. For browsers that do not support it, the workaround is simple enough to write an absolute unit statement. These browsers ignore font sizes that are set with REM.
REM supports IE9 and above, meaning relative to the root element of HTML (Web page), does not, like EM, depend on the parent element's font size, and cause confusion. It's a lot safer to use.
html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5% 1rem = 10px **/} body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}
So the whole page will be more unified! It will not cause chaos!
4. VH and VWThese two units are supported by both ie10+ and modern browsers.
VW viewport width, 1vw equals viewport width of 1%
VH viewport height, 1vh equals viewport high of 1%
VW and VH will change automatically with viewport changes, no longer have JS control full screen.
Even some people's insane font sizes are controlled by VW and VH to achieve the effect of font and viewport size synchronization.
5, Vmin and VmaxBoth ie10+ and modern browsers have supported Vmin
WebKit Browser does not support Vmax before, the new version has been supported, all modern browsers have been supported, but IE all does not support Vmax
Vmin smaller values in VW and VH
higher values in Vmax VW and VH
These two properties also change with viewport
6, CH and exie9+ and modern browsers are already supported, these two units are based on the relative units of the current font-family .
The width of ch character 0
The height of the ex lowercase character x
When the font-family changes, the values of the two units change, and the styles of the different fonts behave differently.
The second part of Mobile H5 development Getting started knowledge: CSS3 's new unit algorithm A, CSS3 calc ().We have mentioned Calc () above, let's talk about it in detail!
Browsers support ie9+, ff4.0+, chrome19+, safari6+
The Calc () syntax is very simple, as we learned to add (+), subtract (-), multiply (*), and (/) as a child, using mathematical expressions to represent:
.haorooms { width: calc(expression);}
With this padding and margin and percentages, the problem can be solved.
For example, our margin is 20px. Then we can write it.
.haorooms{ width: calc(100% - 20px); //注：减号前后要有空格，否则很可能不生效！！}
You can also use this:
.box {background: #f60; height: 50px; padding: 10px; border: 5px solid green; width: 90%; /* to browsers that do not support calc () */width:-moz-calc (100%-(10px + 5px) * Span class= "Hljs-number" >2); width:-webkit-calc (100%-(10px + 5px) * 2); width: calc (100%-(10px + 5px) * 2)} The percentage of line-height may be frequently asked during an interview. Do you know the difference between line-height:120% and line-height:1.2, for example?
Now let's talk about the difference between the line height band and the non-unit, for example:
line-height:26px; 表示行高为26个像素line-heigth:120%;表示行高为当前字体大小的120%line-height:2.6em; 表示行高为当前字体大小的2.6倍
The row height with the unit is inherited, and its child elements inherit the computed value, such as the parent element's font size is 14px, the row height line-height:2em is defined, and the computed value is 28px, which does not change the row height because its child elements change the font size. (For example: parent element 14px, child element 12px, then row height is 28px, child element Although the font is 12, row height or parent element row height)
line-height:2.6;表示行高为当前字体大小的2.6倍
Row heights without units are direct inheritance, rather than computed values, such as parent element font size 14px, row height line-height:2; his row height is 28px, child element size is 12px, no need to define row height, his default row height is 24px. (Example: child element 12px, his row height is 24, does not inherit the parent element's 28)
Hope that these mobile H5 development of the knowledge points, to you H5 front-end development learning has certain help.
H5 Mobile Development Primer and CSS Unit summary and usage
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
