前端web-app适配,viewport设备 font-size rem单位设置
程序员文章站
2022-05-31 18:38:29
...
1.用js来判断界面width,设定不同的字体根元素大小
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 640) {
deviceWidth = 640;
} else if (deviceWidth < 320) {
deviceWidth = 320;
}
document.documentElement.style.fontSize = deviceWidth / 375 * 100 + 'px';
2.以375px的设计稿为例,此时以100px为基底
375/375*100
.title{
font-size: 0.16rem;
}
3.此时的font-size为16px
4.建议使用100px的基底会比较平滑顺畅,此后的尺寸由px全部换算成rem
5.还有以12/14/16px为基底的,可以在font-size内进行设置即可,此时的rem均为该单位