Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to understand the rem in CSS and the layout method of the mobile terminal". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to understand the rem in CSS and the layout method of the mobile terminal" can help you solve your doubts.

What is rem?

Rem is a new unit attribute (fontsizeoftherootelement) added in css3, which changes units according to the font size of the root node of the page. Root! The root node, that is, html.

Example: (in the following example, the root node is html, and its font size is 100px, so the rem set by the elements below the root node is 1rem=100px.)

The initial value of rem is 16px, that is, when the font-size of the root node is not set, 1rem=16px

Html,body {font-size:100px;}

Header {height:1rem;width:1rem;}

What is em?

The em is also a relative unit, and the em unit is a unit that is transformed according to the font size of the parent element.

1. The value of em is not fixed

2. Em inherits the font size of the parent element.

Parent node

Example:

/ / the font size of the parent element is 100px

/ / so the em of the child element is 1em=100px

Third, mobile page development skills:

First investigate the usage of users and sum up what devices most users use.

For example: most of my current users use three kinds of mobile phones, so let's first find out the resolution of each kind of mobile phone from the Internet.

List them all, and then write media queries (because different mobile phones have different resolutions, if you use pixels, the display will be the same. Take a chestnut, for example, children eat, and the standard canteen for children is a steamed bread. However, some children eat a large amount of food, while others eat less, so there will be not enough to eat or can not eat causing waste. How to avoid this situation, so the cafeteria aunt came up with an idea that small potted friends weighing 50 jin to 60 jin can get a steamed bread, half a steamed bread less than 50 jin, and two steamed buns weighing more than 60 jin. )

My user base is about these three devices.

Device name resolution estimation font size rem to px conversion

Iphone5320568font-size:12px;1rem=12px

Iphone6375667font-size:14px;1rem=14px

Iphone6Plus414*736font-size:16px;1rem=16px

First take out an intermediate device to do the basic style of writing

At the beginning, you can write px according to the design drawings (that is, choose the size of the steamed bread first).

Write a set of templates first, and then write media queries for other devices based on this set of templates.

Give priority to writing out the tags for media queries on the page

Width of the width-viewport Devic

Height of height-viewport Devic

Initial scale of the initial-scale-

The minimum scale to which minimum-scale- allows users to zoom

The maximum scale to which maximum-scale- allows users to zoom

Can user-scalable- users zoom manually?

The above has been assigned to write media queries 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, the media query at the top will be overwritten (because it is a cascading style sheet)

@ mediascreenand (max-width:320px) {

Html {font-size:12px;}

}

@ mediascreenand (min-width:321px) and (max-width:750px) {

Html {font-size:14px;}

}

@ mediascreenand (min-width:751px) {

Html {font-size:16px;}

}

Because there is a set of initial templates written above, and because the initial templates are all px, we emphasized at the beginning of the article why we can't use px, so we need to convert the px in the page to the corresponding px value.

Example:

Header {

Width:140px;// is converted to 10rem, because we are based on the font-size:14px of the intermediate device, so 140px=10rem.

}

All the height and width of px are changed to rem so that it can be adapted to three kinds of devices.

After reading this, the article "how to understand rem in CSS and the layout method of mobile terminal" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.