页面实现自适应字体大小,可使用 rem 作为单位,rem相对于html根字号来自适应处理,然后使用 media query 来调整 html 元素的 font-size 即可。
网站自适应CSS
html{font-size:12px; font-size:62.5%; /* 10÷16=62.5% */}
@media only screen and (min-width:321px){
html{font-size:62.5%!important}
}
@media only screen and (min-width:361px){
html{font-size:70.31%!important}
}
@media only screen and (min-width:376px){
html{font-size:73.24%!important;}
}
@media only screen and (min-width:481px){
html{font-size:94%!important; /* 15.04÷16=94% */}
}
@media only screen and (min-width:561px){
html{font-size:109%!important; /* 17.44÷16=109% */}
}
@media only screen and (min-width:641px){
html{font-size:125%!important; /* 20÷16=125% */}
}
app自适应CSS
@media only screen and (min-width: 320px){html {font-size: 62.5%!important;}}
@media only screen and (min-width: 360px){html {font-size: 72.5%!important;}}
@media only screen and (min-width: 400px){html {font-size: 82.5%!important;}}
@media only screen and (min-width: 480px){html {font-size: 94%!important;}}
最后元素的样式可以如下设置
.section-title{font-size:2rem;}