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

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