About the font size of mobile terminals and the size of mobile font

About the font size of mobile terminals and the size of mobile font
I. font-family use unlined Fonts

body {    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

• IOS 4.0 + uses the English font Helvetica Neue. Earlier versions of iOS downgrade using Helvetica

• Set the Chinese font to STHeiTi

• The default numeric font is Helvetica Neue.

It should be added that 文 does not exist in the iOS font library (http://support.apple.com/kb/HT5878), but the system will automatically hit the st文 ststheiti compatibility system default Chinese font-simplified or -traditional

Heiti SC Light simhei-Simplified body (discarded after iOS 7)
Heiti SC Medium-中
Heiti TC Light black body-traditional fine body
Heiti TC Medium -中

Both Chinese and English fonts in native Android use the default unlined font

• Android 4.0 and earlier versions use Droid Sans, and Android

• After 4.0, both Chinese and English fonts will use the new Roboto font of native Android.

• Other third-party Android systems also choose the default unlined font

Conclusion

• Each mobile phone system has its own default font and does not support

• If you do not have special requirements, you do not need to define Chinese fonts on the mobile phone end. Use the system default

• You can use Helvetica for English and digital fonts.

/* Code for defining fonts on the mobile end */body {font-family: Helvetica ;}

2. What is font-size1 and rem?

Rem (font size of the root element) refers to the unit of font size relative to the root element. Simply put, it is a relative unit. When we see rem, we will surely remember that em (font size of the element) refers to the font size unit relative to the parent element. They are actually very similar, except that a calculation rule is dependent on the root element and the parent element.

2. Use viewport settings for scaling

Many web apps are done in this way. The scale is based on the 320 width, and the maximum scale is 320*1.3 = 416, the iPhone 6 plus screen can be scaled to 416. This method is simple, crude, and efficient. However, some of you may find some page elements become blurred due to the scaling reaction.

3. rem adaptation

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;    }

In this case: 20px = 1rem in the root element (font-size = 20px)

General Standards

4. media query settings can also be used for adaptation.

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;     }}

Iii. Image Adaptive

After completing the REM layout, you can achieve the same effect with the percentage layout. However, you must face one problem:The image width is 100%. The height of the page is collapsed during loading..

padding-top = (Image Height / Image Width) * 100%

Principle: When the padding-top value is a percentage, the value is relative to the width.

.cover{position: relative; padding-top: 100%; height: 0; overflow: hidden;}.cover img{position: absolute; top: 0; width: 100%;}

　　

References

Https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

Https://isux.tencent.com/web-app-rem.html

Http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/

Http://alloyteam.github.io/Spirit/modules/Standard/