Px:
Is the most commonly used unit in web design, but how long is 1px, I'm afraid no one can answer it
It is used to indicate that the screen device can physically display the smallest point, which is not a fixed width, the length of the points on different devices, the proportion may be different.
Assume: You are now using a monitor on a 1px wide =1 mm, but I use the monitor 1px wide = two mm, then you define a div width of 100px, you see on the monitor that this div is 10 cm, I see on the monitor is 20 centimeters. The length of another PX point is not necessarily a 1:1 square, and some devices have a different length than the other.
More PX Info points for this blog. PX Compatibility: It is important to note that Google Chrome can recognize the smallest 12px size of the font, more solutions can see the document
Em:
Relative length units. The font size relative to the text within the current object. If the font size of the current inline text is not artificially set, the default font size is relative to the browser. (quoted from CSS2.0 manual)
The default font height for any browser is 16px.
All non-adjustable browsers are compliant with: 1EM=16PX. At this time 1.25em=16px*1.25=20px;
If the body is defined font-size:12px; Now 1em=12px,1.25em=12px*1.25=15px;
If we set the body font-size:62.5%, that is 16px*62.5%=10px, at this time 1em=10px,1.25em=12.5px;
This is better for us to calculate, the original PX value divided by 10, and then put on the EM unit, EM can be compatible with multi-browser
EM characteristics: 1, EM value is not fixed; 2, em inherits the font size of the parent element.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Font</title> <styletype= "Text/css">Body{font-size:16px;}Div{font-size:1.25em;}Div P{font-size:1.25em} </style></Head><Body> <Div>This inside the font 20px; <P>The font size in this 25px</P> </Div> </Body></HTML>
Here you can see the inheritance characteristics of EM, the same set 1.25em,div font in accordance with 16px*1.25=20px; P inside the font according to 20px*1.25=25px; units consistent, showing different sizes;
Here's an EM conversion tool.
Rem:
REM is a new relative unit of CSS3 (root em, root em), and this unit has aroused widespread concern. 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 the font size set with REM, and REM compatibility is the same as EM
VW:
VW is the viewable area width unit. 1VW equals 1% of the viewable area width.
100vw= Relative to window width
100vh= relative to the window height
VM: Relative to the width or height of the window, whichever is smaller; the smaller of VMIN:VW and VH; the larger of VMAX:VW and VH
VW units are similar to percentages, and the difference is that the value of VW is the same for all elements, regardless of their parent or parent element's width. It's a bit like REM units that are always relative to the root element.
VW's compatibility with modern browsers are supported, but the Antique browser is still the next
PX,EM,REM,VW units for Web pages and mobile apps
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
