REM and EM are relative units, and we use them to adapt to a variety of phone screens.
REM is calculated based on the HTML root node, and EM is the font that inherits the parent element. For example, the following demo
<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "UTF-8"><Metaname= "Viewport"content= "Width=device-width,initial-scale=1,user-scalable=no"><title>Test REM</title><style>HTML{font-size:40px; }Body{font-size:20px; }. Use_em,.use_rem{font-size:14px; }. Use_em span{font-size:1em; }. Use_rem span{font-size:1rem; }. Img_em{width:2em;Height:2em; }. Img_rem{width:2rem;Height:2rem; }</style></Head><Body><Divclass= "Use_em"> <span>Font-size using EM</span></Div><Divclass= "Use_rem"> <span>Font-size using REM</span></Div><P>Picture using EM</P><imgsrc=".. /images/face01.jpg "class= "Img_em"><P>Pictures using REM</P><imgsrc=".. /images/face02.jpg "class= "Img_rem"></Body></HTML>
The first span inherits the size of its parent element Div, so it is 14px, and the second span is computed by HTML, so it is 40px. The first IMG inherits the body, and the second IMG is computed based on HTML. In this simple example, we learn that the above conclusions are correct. So we can adapt to different phone screens by this ratio.
For example, the REM base value on Iphone5 is 32px, then render a 64*64px div, then render with 2rem*2rem, the formula is as follows ————
Px/rem = base Value
For some fixed elements, we do not recommend using REM, but instead use PX to ensure consistency on the same screen, such as font font-size, which tends to be more useful for reading, and not suitable for layout.
The EM units are converted to pixel values, depending on the font size they use. This font size is affected by the font size inherited from the parent element, unless explicitly overridden with a specific unit.
If the P element has a corresponding PX, he calculates it according to his own condition, otherwise it inherits the PX of the parent element. That is, if I remove font-size from the P element, then his padding is 32px, which means we have to manage each element correctly when we use EM. So personally recommended REM is more suitable for mobile, it gives us a way to get user preferences to affect the size of each element of the site that uses REM, no longer using fixed PX units.
Mobile side em vs. REM difference
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
