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.mzph.cn/news/70789.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux container_of() 宏定义

container_of 宏 今天遇到了一段这样的代码,大致意思是 通过该struct结构体变量的成员的地址来反推该struct结构体变量的地址 并且用到了内核的宏,container_of() static inline struct nova_inode_info *NOVA_I(struct inode *inode) {return container…

leetcode 655. 输出二叉树(java)

输出二叉树 题目描述代码演示 题目描述 难度 - 中等 leetcode 655. 输出二叉树 给你一棵二叉树的根节点 root ,请你构造一个下标从 0 开始、大小为 m x n 的字符串矩阵 res ,用以表示树的 格式化布局 。构造此格式化布局矩阵需要遵循以下规则&#xff1a…

Python接口自动化封装导出excel方法和读写excel数据

一、首先需要思考,我们在页面导出excel,用python导出如何写入文件的 封装前需要确认python导出excel接口返回的是一个什么样的数据类型 如下:我们先看下不对返回结果做处理,直接接收数据类型是一个对象,无法获取返回值…

IOC和注解

想要学好spring,必须时时刻刻想着,spring的本质就是一个容器,放java对象的容器,java对象在spring容器中也叫做bean对象。 文章目录 一、spring介绍1、什么是框架2、框架的作用![在这里插入图片描述](https://img-blog.csdnimg.cn…

MongoDB的数据恢复与备份

MongoDB的数据恢复与备份 在MongoDB中,备份和恢复数据是一项关键任务,可以确保数据的安全性并防止意外数据丢失。本文将介绍MongoDB的数据恢复与备份原理并提供相关的编程代码和配置。 1. 数据备份原理 MongoDB提供了多种备份数据…

数字图像基础

数字图像基础 人眼感知视觉 锥状体(亮视觉) 杆状体(暗视觉)人的视觉系统感知的亮度是进入人眼光强的对数函数亮度适应现象: 视觉系统不能同时在一个范围内工作,而通过改变其整个灵敏度来实现 光与电磁波谱…

这几招真管用!找回丢失的iPhone的好方法!

你昂贵的iPhone不见了。它丢了吗?它被偷了吗?如果你把iPhone弄丢了,你可以从各种其他来源找到它,包括iPad、Mac、iCloud和Apple Watch。 你可以使用iCloud网站上的苹果“查找我的”应用程序、你的任何其他苹果设备或你家人注册的设备来追踪它。或者从“查找我的”应用程序…

Java基础知识点汇总

一、Java基础知识点整体框架 详细知识点见链接资源,注:框架是用Xmind App完成,查看需下载。 二、基础知识各部分概况 2.1 认识Java 2.2 数据类型和变量 2.3 运算符 2.4 程序逻辑控制 2.5 方法的使用 2.6 数组的定义和使用 2.7 类和对象 2.8 …

移植STM32官方加密库STM32Cryptographic

感谢这位博主,文章具有很高的参考价值: STM32F1做RSA,AES数据加解密,MD5信息摘要处理_我以为我爱了的博客-CSDN博客 概述 ST官方在很多年前就推出了自己的加密库,配合ST芯片用起来非常方便,支持ST的所有…

借助CIFAR10模型结构理解卷积神经网络及Sequential的使用

CIFAR10模型搭建 CIFAR10模型结构 0. input : 332x32,3通道32x32的图片 --> 特征图(Feature maps) : 3232x32即经过32个35x5的卷积层,输出尺寸没有变化(有x个特征图即有x个卷积核。卷积核的通道数与输入的通道数相等,即35x5&am…

使用U盘同步WSL2中的git项目

1、将U盘挂载到WSL2中 假设U盘在windows资源管理器中被识别为F盘,需要在WSL2中创建一个目录挂载U盘 sudo mkdir /mnt/f sudo mount -t drvfs F: /mnt/f后续所有的操作都完成后,拔掉U盘前,可以使用下面的命令从WSL2中安全的移除U盘 umount …

SpringCloud(十)——ElasticSearch简单了解(一)初识ElasticSearch和RestClient

文章目录 1. 初始ElasticSearch1.1 ElasticSearch介绍1.2 安装并运行ElasticSearch1.3 运行kibana1.4 安装IK分词器 2. 操作索引库和文档2.1 mapping属性2.2 创建索引库2.3 对索引库的查、删、改2.4 操作文档 3. RestClient3.1 初始化RestClient3.2 操作索引库3.3 操作文档 1. …

网络技术二十二:NATPPP

NAT 转换流程 产生背景 定义 分类 常用命令 PPP PPP会话建立过程 认证 PPP会话流程

第 3 章 栈和队列(循环队列的顺序存储结构实现)

1. 背景说明 和顺序栈相类似,在队列的顺序存储结构中,除了用一组地址连续的存储单元依次存放从队列头到队列尾的元素之外, 尚需附设两个指针 front 和 rear 分别指示队列头元素及队列尾元素的位置。约定:初始化建空队列时&#x…

qt nodeeditor编译安装

目录 1. 下载源码 2. Qt creator编译源码 2.1 编译debug模式 (MinGW) 2.2 编译release模式 (MinGW) 1. 下载源码 https://github.com/paceholder/nodeeditor/archive/refs/tags/3.0.10.zip 2. Qt creator编译源码 解压文件…

error:0308010C:digital envelope routines::unsupported

Vue 报错error:0308010C:digital envelope routines::unsupported 出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响. 方法1 打开终端(按健winR弹出窗口&a…

Java 数据库改了一个字段, 前端传值后端接收为null问题解决

前端传值后端为null的原因可能有很多种,我遇到一个问题是,数据库修改了一个字段,前端传值了,但是后台一直接收为null值, 原因排查: 1、字段没有匹配上,数据库字段和前端字段传值不一致 2、大…

c语言 4.0

💂 个人主页: 程序员爱摸鱼🤟 版权: 本文由【程序员爱摸鱼】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注点赞收藏(一键三连)哦💅 想寻找共同成长的小伙伴,可以互粉哦 💬文章目录…

软件架构设计(六) 软件架构风格-MDA(模型驱动架构)

概念 模型驱动架构MDA, 全称叫做Model Driven Architecture。 Model:表示客观事物的抽象表示Architecture:表示构成系统的部件,连接件及其约束的规约Model Driven: 使用模型完成软件的分析,设计,构建,部署和维护等 开发活动MDA起源于分离系统规约和平台实现的思想。之前…

stable diffusion实践操作-复制-清空-保存提示词

系列文章目录 stable diffusion实践操作 stable diffusion实践操作-webUI教程 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 系列文章目录前言一、右上生成图标附近按钮介绍1. 箭头介绍(复现别人的…