In-depth understanding of rem in CSS and layout methods on mobile terminals-CSS Tutorial-php.cn

In-depth understanding of rem in CSS and layout methods on mobile terminals

yulia

Release： 2018-09-17 16:15:08

Original

1525 people have browsed it

I believe everyone is already familiar with px, but when it comes to rem, some people don’t know it. Today’s article mainly introduces what rem and em are, and their layout methods in mobile terminals. You can refer to them if necessary. I hope it will be helpful to you.

1. What is rem?

rem is a newly added unit attribute (font size of the root element) in CSS3, which is a unit that is converted according to the font size of the root node of the page. root! ! ! ! ! ! ! ! ! The root node, which is html.

Example: (The root node in the example below is html, and its font size is 100px, so the rem set for the elements below the root node is 1rem=100px.)
The initial value of rem It is 16px, which means that when the font-size of the root node is not set, 1rem=16px

<html>
    <head>
        <style>
            html,body{ font-size: 100px;  }
            header{ height: 1rem;width: 1rem;  }  
        </style>
    </head>
    <body></body>
    <header></header>
</html>

Copy after login

2. What is em

em is also a relative unit , the em unit is the unit that is converted based on the font size of the parent element.
1. The value of em is not fixed;
2. Em will inherit the font size of the parent element.

Parent node
Example:

<header style="font-size:100px;">//父元素的字体大小是100px
    <div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>

Copy after login

3. Mobile page development skills:

First investigate the user’s usage and summarize the general What devices are some users using?
For example: Most of my current users use three types of mobile phones. We first find out the resolution of each mobile phone from the Internet.

List them all, and then write a media query (because different mobile phones have different resolutions, so if you use pixels, the display will be the same, for example~ For example, if children are eating, the canteen gives the children a label. It comes with a steamed bun, but some children eat a lot, and some eat a small amount, so they may not eat enough or they can’t eat, resulting in waste. How to avoid this situation, so the cafeteria aunt came up with an idea. Little friends can receive one steamed bun, half a steamed bun weighing less than 50 kilograms, two steamed buns weighing more than 60 kilograms, these three distribution methods.)

My user groups are probably these three. Device
Device name resolution estimate font size rem to px conversion
iphone5 320568 font-size: 12px; 1rem=12px
iphone6 375667 font-size: 14px; 1rem=14px
iphone6 Plus 414* 736 font-size: 16px; 1rem=16px

First take out an intermediate device to do basic style writing
The initial writing can be done in px according to the design drawing (that is, select it first The size of steamed buns)
Write a set of templates first, and then write media queries for other devices based on this template

Prioritize writing media query tags on the page

<meta name="viewport" content="width=device-width,      initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,    user-scalable=no">

Copy after login

width - the width of the viewport device
height - the height of the viewport device
initial-scale - the initial scaling ratio
minimum-scale - the minimum ratio that the user is allowed to zoom to
maximum-scale - the user is allowed to zoom The maximum proportion to
user-scalable - whether the user can manually scale it

Assigned above, write the media query in this way

html,body{ height: 100%; margin : 0; padding: 0; font-size: 14px;}//Note that the initial style must be written at the top! ! ! ! If written at the bottom of the media query, it will cover the media query above (because it is a cascading style sheet~)

@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

Copy after login

Because a set of initial templates are written above, because the initial templates are all px, in the article At the beginning, we emphasized why px cannot be used, so we need to convert the px in the page into the corresponding rem value

Example:

header{
    width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}

Copy after login

Change all the height and width of px to This completes the adaptation of rem to three devices.

The above is the detailed content of In-depth understanding of rem in CSS and layout methods on mobile terminals. For more information, please follow other related articles on the PHP Chinese website!