当前位置: 首页 > news >正文

uniapp移动端h5设计稿还原

思路

动态设置html的font-size大小

实现步骤

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

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

    在这里插入图片描述

  2. 通过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 + ' ');
    

    在这里插入图片描述

最后还原设计稿写法

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

http://www.lryc.cn/news/148321.html

相关文章:

  • 后端数据配置相对路径,前端添加网站根 URL (根路径)- js获取网站项目根路径- 获取根路径后的第一个斜杠前 / 的项目- - 判断url包含某字符串
  • deepspeed多机多卡并行训练指南
  • 9.Redis-zset
  • 云计算的三个主要服务模型:IaaS、PaaS 和 SaaS
  • spring ioc,DI,AOP概述
  • meethigher-Apache Poi 实现Excel多级联动下拉框
  • 基于食肉植物算法优化的BP神经网络(预测应用) - 附代码
  • FFDNet-pytorch版本代码训练教程
  • C语言练习7(巩固提升)
  • golangORM框架Gorm
  • Python项目实战之《飞机大战游戏》
  • Mysql数据库(2)—事务和锁
  • Shell - 加固系统配置
  • 【linux】记录archlinux软件包更新后lualatex无法编译的一种解决方案
  • 设计模式中的关系
  • C语言之数组题
  • DbContext是Entity Framework中的一个核心类
  • BTC价格预测:灰度突如其来的胜利是否会打破“九月魔咒”?
  • 软件测试/测试开发丨Selenium 高级控件交互方法
  • 算法通关村-----二分查找在二叉搜索树中的应用
  • 总结限流、降级与熔断的区别
  • windows下安装go环境 和vscode中go扩展+调试
  • 销毁 ECharts 图表
  • 并发编程的故事——Java线程
  • 菜鸟教程《Python 3 教程》笔记(13):迭代器与生成器
  • ceph架构及 IO流程
  • ssh 基本用法与免密登录
  • Unity3D 如何在ECS架构下,用Unity引擎进行游戏开发详解
  • Kotlin协程flow的debounce与管道Channel
  • 在JavaScript中,你可以使用多种方法来查找包含特定元素的数组或对象