uniapp移动端h5设计稿还原

最新推荐文章于 2024-03-13 12:50:50 发布

HerayChen

最新推荐文章于 2024-03-13 12:50:50 发布

阅读量842

点赞数

文章标签：移动端 h5移动端设计稿还原

本文链接：https://blog.csdn.net/qq_45832807/article/details/132600047

版权

思路

动态设置html的font-size大小

实现步骤

先创建一个public.css文件，设置初始的font-size大小

/* 注意这样写 只能使用css文件, scss 是不支持的, setProperty 只适用于原生css上 */
html {
    --gobal-font-size: 0.45px;
}
.gobal-font-size {
    font-size: var(--gobal-font-size) !important;
}

在这里插入图片描述

通过setProperty方法动态修改初始font-size的大小

// h5 根据手机宽度适配屏幕大小
// 获取屏幕的宽度
var WIDTH = document.documentElement.clientWidth;
// 求应该要设置的文字的大小
const fontSize = (WIDTH / 750) + "px";
// 将要设置的文字大小的class添加到 html 标签上（通过style动态修改和uniapp的框架有冲突，不能那样修改）
document.documentElement.className = 'gobal-font-size';
// 设置html上 公共文字大小的值
const root = document.documentElement;
root.style.setProperty('--gobal-font-size', fontSize + ' ');