uniapp移动端h5设计稿还原

思路

动态设置html的font-size大小

实现步骤

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

    css 复制代码
    /* 注意这样写 只能使用css文件, scss 是不支持的, setProperty 只适用于原生css上 */
    html {
        --gobal-font-size: 0.45px;
    }
    .gobal-font-size {
        font-size: var(--gobal-font-size) !important;
    }
  2. 通过setProperty方法动态修改初始font-size的大小

    js 复制代码
    // 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 + ' ');

最后还原设计稿写法

设计稿是多少px,代码就写多少rem。

相关推荐
招风的黑耳2 天前
Axure移动端选择器案例:多类型选择器设计与动态效果实现
移动端·选择器·拨盘选择器·联动选择器
招风的黑耳2 天前
告别加班!这款Axure移动端元件库,让你原型效率提升300%
axure·移动端·图表·页面设计
暖木生晖1 个月前
流式布局(百分比布局)
前端·移动端
郑知鱼3 个月前
【拥抱鸿蒙】HarmonyOS NEXT实现双路预览并识别文字
华为·ocr·harmonyos·鸿蒙·移动端·鸿蒙next·ohos
郑知鱼3 个月前
【拥抱鸿蒙】Flutter+Cursor轻松打造HarmonyOS应用(二)
flutter·华为·harmonyos·鸿蒙·cursor·移动端·鸿蒙next·ohos
郑知鱼3 个月前
【拥抱鸿蒙】Flutter+Cursor轻松打造HarmonyOS应用(一)
flutter·华为·harmonyos·鸿蒙·cursor·移动端·鸿蒙next·ohos
郑知鱼3 个月前
【拥抱鸿蒙】基于 Cocos Creator 的 HarmonyOS 自动构建
华为·harmonyos·鸿蒙·移动端·鸿蒙next·ohos
Web极客码6 个月前
如何在WordPress网站中查看移动版本—快速预览与自定义设置
wordpress·移动端·手机端
&活在当下&8 个月前
uniapp H5页面实现懒加载
前端·uni-app·h5·移动端