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