自适应网页中字体大小自适应屏幕

页面实现自适应字体大小,可使用 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;}