[CSS] px em rem

Source: Internet
Author: User

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 />
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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.