Adapt to mobile terminals of different sizes

Media inquiries

Use media queries to set the initial value size (font-size attribute) for the root element (html) of mobile phones of different sizes:

@media screen and (max-width:374px){html{font-size:85.6px}}
@media screen and (min-width:375px) and (max-width:413px){html{font-size:100px}}
@media screen and (min-width:414px) and (max-width:639px){html{font-size:110.7px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:170px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:192px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:200px}}
@media screen and (min-width:800px){html{font-size:213px}}

After the above settings, the size of elements on the page can be set in rem units:

line-height: 0.4rem;    / * 40px * / 
font-size: 0.16rem;    / * 16px * /