欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端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均为该单位
前端web-app适配,viewport设备 font-size rem单位设置

相关标签: 适配