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.rhkb.cn/news/123148.html

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

相关文章

面试中的身体语言:非语言信息的重要性

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

Termux配置bashrc,终端长路径改为短路径

Termux配置bashrc termux的bashrc在$HOME/../usr/etc目录下 先使用cd命令进入用户主目录 然后cd ../usr/etc,ls可以发现,存在一个名为bash.bashrc的文件 使用vim或者其它编辑器打开 大概在第15行 PS1\[\e[0;32m\]\w\[\e[0m\] \[\e[0;97m\]\$\[\e[0…

六安RapidSSL泛域名https能保护几个域名

RapidSSL是Geotrust旗下的子品牌,Geotrust是国际知名的CA认证机构,每年都要通过WebTrust年检,而Geotrust旗下的https证书已经应用于市场多年,Geotrust的子品牌RapidSSL证书经营的DV基础型泛域名https证书也受到市场的欢迎。今天就…

如何使用SpringCloud Eureka 创建单机Eureka Server-注册中心

😀前言 本篇博文是关于使用SpringCloud Eureka 创建单机Eureka Server-注册中心,希望你能够喜欢 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家&…

2022年12月 C/C++(八级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:生理周期 人生来就有三个生理周期,分别为体力、感情和智力周期,它们的周期长度为23天、28天和33天。每一个周期中有一天是高峰。在高峰这天,人会在相应的方面表现出色。例如,智力周期的高峰,人会思维敏捷,精力容易高度集中。因…

【已解决】使用xshell来ssh到vmware的虚拟机,请求超时的问题

我的情况: 1.本地ping虚拟机请求超时,但是虚拟机ping本地成功 2.本地和虚拟机的防火墙都关了,ssh服务也开了 3.端口也是正确的 百思不得其解,不知道为什么就是连接不上 当出现这种情况的时候,可以考虑一下vmware的…

postgresql 安装教程

postgresql 安装教程 本文以window 15版本为教程 文章目录 postgresql 安装教程1.下载地址2.以管理员身份运行3.选择安装路径,点击Next4.选择组件(默认都勾选),点击Next5.选择数据存储路径,点击Next6.设置超级用户的…

Blazor前后端框架Known-V1.2.14

V1.2.14 Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行。 Gitee: https://gitee.com/known/KnownGithub:https://github.com/known/Known 概述 基于C#和Blazo…

展厅显示大屏怎么选,展厅使用哪种显示大屏好?

近年来,随着信息化科技快速发展,越来越多的企事业单位的展厅都会采用显示大屏来展现各种信息。那么,展厅显示大屏怎么选,哪种显示大屏更好?接下来,小灰从专业角度,用通俗易懂的文字为大家逐一分…

【算法训练-链表 三】【判断】判断链表中是否有环、判断链表是否为回文链表

废话不多说,喊一句号子鼓励自己:程序员永不失业,程序员走向架构!本篇Blog的主题是【链表的相关判断】,使用【链表】这个基本的数据结构来实现,这个高频题的站点是:CodeTop,筛选条件为…

通过 Blob 对二进制流文件下载实现文件保存下载

原理&#xff1a;前端将二进制文件做转换实现下载: 请求后端接口->接收后端返回的二进制流(通过二进制流&#xff08;Blob&#xff09;下载,把后端返回的二进制文件放在 Blob 里面)->再通过file-saver插件保存 页面上使用&#xff1a; <span click"downloadFil…

Python Opencv实践 - 图像的距(Moments,Hu Moments)

参考资料&#xff1a;​​​​​​矩特征---OpenCV-Python开发指南&#xff08;25&#xff09;_cv2.moments_李元静的博客-CSDN博客 探究opencv中的moments函数和HuMoments函数_opencv moment_傲笑风的博客-CSDN博客 import cv2 as cv import numpy as np import matplotlib.…

Scrum敏捷模式的优势点、实践经验及适用企业

Scrum敏捷模式是一种灵活、适应性强的开发方法&#xff0c;其核心理念是以短周期、高频率的方式进行项目开发&#xff0c;确保团队能够快速响应变化。 Scrum包含三个角色&#xff1a;产品负责人&#xff08;Product Owner&#xff09;、Scrum Master和开发团队&#xff08;Tea…

环信uni-app-demo 升级改造计划——单人多人音视频通话(三)

前序文章&#xff1a; 环信 uni-app Demo升级改造计划——Vue2迁移到Vue3&#xff08;一&#xff09; 环信即时通讯SDK集成——环信 uni-app-demo 升级改造计划——整体代码重构优化&#xff08;二&#xff09; 概述 在将声网 uni-app 音视频插件正式集成进入环信的 uni-app…

箭头函数(arrow function)与普通函数之间的区别是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 语法简洁性&#xff1a;⭐ this 的绑定&#xff1a;⭐ 不能用作构造函数&#xff1a;⭐ 没有 arguments 对象&#xff1a;⭐ 不适用于方法&#xff1a;⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上…

如何解决GitHub 访问不了?小白教程

GitHub 是全球最大的代码开源平台&#xff0c;小伙伴们平时都喜欢在那里找一些优质的开源项目来学习&#xff0c;以提升自己的编程技能。 但是很多小白初探GitHub 发现访问不了&#xff0c;不能访问 通过一下方法绕过这堵墙&#xff0c;成功下载 GitHub 上的项目。过程非常简单…

公园气象站:用科技力量,感知气象变化

在城市的喧嚣中&#xff0c;公园成为人们休闲娱乐的宁静之地。而在这些公园中的公园气象站静静地矗立着&#xff0c;不仅为公园的日常运营提供着重要数据&#xff0c;还在为游客的安全保驾护航。 用科技力量&#xff0c;感知气象变化 科技的创新为气象监测提供了更为精准的手…

基于SNAT+DNAT发布内网K8S及Jenkins+gitlab+Harbor模拟CI/CD的综合项目

目录 项目名称 项目架构图 项目环境 项目概述 项目准备 项目步骤 一、修改每台主机的ip地址&#xff0c;同时设置永久关闭防火墙和selinux&#xff0c;修改好主机名&#xff0c;在firewalld服务器上开启路由功能并配置snat策略。 1. 在firewalld服务器上配置ip地址、设…

float浮动布局大战position定位布局

华子目录 布局方式普通文档流布局浮动布局&#xff08;浮动主要针对与black&#xff0c;inline元素&#xff09;float属性浮动用途浮动元素父级高度塌陷 position属性定位篇相对定位&#xff08;relative为属性值&#xff0c;配合left属性&#xff0c;和top属性使用&#xff09…

医院空调冷热源设计方案VR元宇宙模拟演练的独特之处

作为一个备受关注的技术-元宇宙&#xff0c;毋庸置疑的是&#xff0c;因为建筑本身契合了时尚、前卫、高端、虚拟、科幻、泛在、协作、互通等元素特征&#xff0c;因此在建筑行业更需要元宇宙&#xff0c;以居民建筑环境冷热源设计来说&#xff0c;元宇宙会打破既定的现实阻碍和…