做手机端页面时需要用到的
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