[CSS] px em rem

First, the difference

PX is relative to the display screen resolution.

The default font size of EM relative to the browser.

REM relative to the HTML root element.

Second, use

1, EM

The default font height for any browser is 16px. All non-adjustable browsers are compliant with: 1EM=16PX. So 12px=0.75em,10px=0.625em.

To simplify the conversion of font-size, you need to declare font-size=62.5% in the body selector in the CSS, which makes the EM value 16px*62.5%=10px.

So 12px=1.2em, 10px=1em, that is, you just need to divide your original PX value by 10, and then put the EM as the unit on the line.

So when we are writing CSS, we need to pay attention to two points:

1. Declare font-size=62.5% in the body selector;

2. Divide your original PX value by 10 and then replace it with EM as the unit;

3. Recalculate the EM values of the enlarged fonts. Avoid duplicate declarations of font size.

2. rem

Reference: http://isux.tencent.com/web-app-rem.html

CSS3 new properties for responsive web design

The response of the previous webpage is to set the meta viewport tag directly within the head tag to zoom in.

iphone4:320px width of design

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

Iphone6:375px width of design

iPhone6需要调整缩放比例 initial-scale=375/320 =1.18

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.18 />

IPhone6 Plus: Design width of 414px initial-scale=414/320 =1.30

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.30 />

缺点是：这样做会使得，因为initial-scale越来越大，相当于拉伸网页，而使得在大屏幕的移动端设备下，文字、图片会变模糊。

REM can be scaled to fit all screens

html{    font-size:20px;}. btn {    width:6rem;    Height:3rem;    Line-height:3rem;    Font-size:1.2rem;    Display:inline-block;    Background: #06c;    Color: #fff;    Border-radius:. 5rem;    Text-decoration:none;    Text-align:center;    }

html{    font-size:40px;}

The button size results are as follows:

As long as you change the size of the font-size in the HTML, all of the width, height, and other elements in the page are changed by the size of the REM unit.

You can use media to adapt pages of different sizes, such as:

HTML {    font-size:20px;} @media only screen and (min-width:401px) {    html {        font-size:25px!important;    }} @media only screen and (min-width:428px) {    html {        font-size:26.75px!important;    }} @media only screen and (min-width:481px) {    html {        font-size:30px!important;     }} @media only screen and (MIN-WIDTH:569PX) {    html {        font-size:35px!important;     }} @media only screen and (min-width:641px) {    html {        font-size:40px!important;     }}

Supplemental: Viewpoint Description

<meta name= "viewport" content= "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; "/>

Width:viewport width (range from 200 to 10,000, default is 980 pixels)
Height:viewport height (range from 223 to 10,000)
Initial-scale: Initial zoom ratio (range from >0 to 10)
Minimum-scale: The minimum scale to allow the user to zoom
Maximum-scale: Allows the user to zoom to the maximum scale
User-scalable: Whether the user can manually scale

For these properties, we can set one or more of them, do not need to be set up at the same time, the IPhone will automatically calculate the other property values based on the properties you set, rather than the default values directly.

If you put initial-scale=1, then width and height in the vertical screen automatically for 320*356 (not 320*480 because the address bar occupy space), horizontal screen automatically for 480*208.

Similarly, if you set the width only, the Initial-scale and height will be calculated automatically.

For example, if you set the width=320, the vertical screen Initial-scale is 1, horizontal screen when it becomes 1.5.

[CSS] px em rem