做手机端页面时需要用到的

html:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">

css:

@media only screen and (min-width:320PX) and (max-width:360PX) {
html {
font-size: 13.65px
}
}

@media only screen and (min-width:360PX) and (max-width:375PX) {
html {
font-size: 15.36px
}
}

@media only screen and (min-width:375PX) and (max-width:390PX) {
html {
font-size: 16px
}
}

@media only screen and (min-width:390PX) and (max-width:414PX) {
html {
font-size: 16.64px
}
}

@media only screen and (min-width:414PX) and (max-width:640PX) {
html {
font-size: 17.664px;
}
}

@media screen and (min-width:640PX) {
html {
font-size: 27.31px
}
}
rem字体比例：
12px:0.75rem
13px:0.08125rem
14px:0.875rem
15px:0.09375rem
16px:1rem
17px:0.10625rem
18px:1.125rem
20px:1.25rem
22px:1.375rem
24px:1.5rem

宽高比例：
1px=0.031rem