Mobile terminals use rem to adapt to Android ios Mobile Phone principles, mobile responsive development, and Android ios

Source: Internet
Author: User

Mobile terminals use rem to adapt to Android ios Mobile Phone principles, mobile responsive development, and Android ios

People may already be familiar with the rem unit. rem is a method that shows the width with the html font size. How can we develop the mobile terminal response?

The default font size of the browser is 16 PX and 1rem is 16 PX.

If we want to make 1rem equal to 12px, we only need to set the html font size to 12/16 and the html font size to font-size: 75%.

Html {
Font-size: 75%; <! -- 12/16 -->
}

Let's take a look at the screen width of each browser.

IPhone 4 320

IPhone 5 320

IPhone 6 375

Iphone6p 414

The screen width of most Android phones is 360

 

Our company's design is based on the iPhone 6 and is subject to the design of 375.

If you want to auto scale the iphone 6 in other iphone versions, you need to perform a simple scaling operation, and take 1rem = 12px as an example.

Iphone4 320/375 * 75% = 64%

Iphone5 320/375 * 75% = 64%

Iphone6 375/375 * 75% = 75%

Iphone6p 414/375 * 75% = 82.8%

Android 360/375 * 75% = 72%

We can set the rem ratio of fonts in different media in this way. Because the differences between Android and iPhone 6 are small, the differences are ignored during the setting.

 

Html {-webkit-text-size-adjust: none; font-size: 75%; height: 100%;} @ media screen and (min-width: 10px) and (max-width: 320px) {html {font-size: 64% ;}@ media screen and (min-width: 414px) and (max-width: 768px) {html {font-size: 82.8% ;}/ * the font size is calculated by changing the font size from 10 to 20, which indicates the total number of rem settings. The font size is directly replaced by class */. s10 {font-size: 0.83rem ;}. s11 {font-size: 0.913rem ;}. s12 {font-size: 1rem ;}. s13 {font-size: 1.079rem ;}. s14 {font-size: 1.162rem ;}. s15 {font-size: 1.245rem ;}. s16 {font-size: 1.33rem ;}. s17 {font-size: 1.411rem ;}. s18 {font-size: 1.5rem ;}. s20 {font-size: 1.66rem ;}

Understanding the above content carefully will be handy in applying 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.