Mobile-side layout rem EM

1. Concept

EM as a unit of font-size when it represents the parent element's font size, EM as other property units, represents its own font size

REM when used for non-root elements, relative to the root element font size, rem effect when the root element font size, relative to its initial font size

Pros and Cons: Em is for the font and row high, sometimes the child element font should be relative to the parent element, the element line should be relative to the font size, and REM is a bit of a unified reference system

2. REM Layout principle

The essence of REM layout is equal to scale, which is generally based on width

3. A better solution than REM

vw--viewport width of the 1/100;vh--viewport height of 1/100

4. REM Problems

1, the first is the font of the problem, font size and can not use REM, font size and font width, and is not linear relationship, so the font size can not use REM; because the size of the root element font is set, all elements that do not have font size are affected because the font size is inherited

• Solution: Fix in body

• Inquiry: How the font size realizes the response style

By modifying the size of the body font to achieve, at the same time all the font size is used in the EM unit, the right is EM, because only em can achieve, synchronization changes, I have said that EM is for the font of the birth

@media screen and (min-width: 320px) {    body {font-size: 16px}}@media screen and (min-width: 481px) and (max-width:640px) {    body {font-size: 18px}}@media screen and (min-width: 641px) {    body {font-size: 20px}}p {font-size: 1.2em}p a {font-size: 1.2em}

2, if the user in the PC-side browsing, the page is too wide how to do?

Generally we will set a maximum width, larger than the width of the page center, left white on both sides

3, if the user disabled JS how to break?

You can first add a noscript tag to prompt the user

Add a default font size of 320 to HTML to ensure that the page can be displayed

If you want a better experience, you might as well add media queries.

@media screen and (min-width: 320px) {    html {font-size: 3.2px}}@media screen and (min-width: 481px) and (max-width:640px) {    html {font-size: 4.8px}}@media screen and (min-width: 641px) {    html {font-size: 6.4px}}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Mobile-side layout rem EM