html 字号自适应 自适应网页中字体大小自适应屏幕 - YangJunwei

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