首页 > 其他分享 >pc大屏适配

pc大屏适配

时间:2024-11-03 15:19:22浏览次数:6  
标签:scale const px2rem 适配 js 1920 pc rem 大屏

在文件utils里配置

 

const baseSize = 12
//设置rem函数
function setRem() {
    //页面宽度相对于设计图宽的缩放比例,根据需要修改 1920(设计稿宽度)
    const scale = document.documentElement.clientWidth / 1920;
    // 设置页面根节点字体大小(match.min(scale,2)"指最高放大比例为2 根据需要修改)
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
//初始化
//改变窗口大小时重新设置rem
window.onresize = function () {
    setRem()
}

然后在 main.js里进行全局引用

import './utils/px2rem.js'

 在去consfing.js里配置 我这里是在vite.config.js里配置的,不通过打包方式,配置有点区别

const px2rem = require('postcss-px2rem');
const postcssRem = px2rem({
  //基准大小 baseSize,需要和rem.js相同
  remUnit: 12,
})
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `,
      }
    },
    postcss: {
      plugins: [postcssRem]
    }
  },
})

效果如图

 在1920*1080下fonsize的字体大小是12px

 

注:不要写行内样式不然转换不了,如果px不想被转换可以写大小的PX

 

标签:scale,const,px2rem,适配,js,1920,pc,rem,大屏
From: https://www.cnblogs.com/whenwei123/p/18523487

相关文章

  • Google远程过程调用-GRPC
    前言HTTP/2是HTTP协议的第二个主要版本,它在HTTP/1.x的基础上引入了许多改进,以提高网络性能和效率。以下是HTTP/2与HTTP/1.x之间的一些主要区别:•二进制协议:•HTTP/2:采用二进制格式,而不是HTTP/1.x的文本格式。这使得解析更快、更高效。•HTTP/1.x:基于文本的协议,......
  • WinAppDriver-PC端自动化
    一、WinAppDriver安装配置1、进入WinAppDriver下载页面(https://github.com/Microsoft/WinAppDriver/releases),下载WinAppDriver安装程序(找到MSI安装应用程序) 2、双击安装即可安装路径下会有一个WinAppDriver.exe程序文件,双击启动即可运行 3、打开电脑开发人员模式 二、......
  • 2024CCPC哈尔滨 L 题解
    思路首先可以发现这个期望其实是假的,我们只需要把所有方案的答案加起来,最后除以\((\frac{n(n-1)}{2})^2\)即可,现在考虑如何统计所有方案的答案。我们先考虑一条路径的方案数:假设存在一条从\(x\)到\(y\)的公共路径,其中\(x\)是\(y\)的祖先,那么小红和小蓝分别选择的路径,......
  • PCB电源层布线信号
    在印刷电路板(PCB)的设计过程中,电源层通常被视为电源分配网络(PDN)的核心。电源层和接地层通常是通过平面铜层来实现的,旨在确保系统稳定性。然而,随着电路板复杂性的增加,尤其是在多层电路板中,设计师可能面临在电源层上布置信号线路的需求。虽然这种做法可以节省空间,但也带来了许......
  • ICPC 成都游记
    提前声明:本文可能包含剧透。Day-1一天赶完三个ddl,终于空出一个周末了!Day0六点半就起床打车去机场,结果发现某队长把起飞时间记早了1h,于是整队在赛百味悠闲地吃了个早餐休息了一下。飞机上重刷了缓存的巴别塔之茧(的前1/3),然后一路打瞌睡地到了比赛场地。进来的时候发现热身......
  • MiniPCIe 接口 CANFD卡
    概述基于MiniPCIe高性能接口CANFD卡采用标准MiniPCIe接口尺寸设计,方便PC机或嵌入式设备快速拓展出CANFD接口,实现数据采集与数据处理。兼容高速CAN和CANFD两种通信需求、支持CAN2.0A、CAN2.0B协议,符合ISO11898-1规范。规格PC接口:高速MiniPCIE接口,PCIExpressx1规格;......
  • Windows PC通过网络控制PDU开关
    PDU开关原理,是通过跟一台设备进行通信,如果正常通信,则PDU不会进行操作,如果通信中断且超时多长时间多少次后,会进行保持、重启、断开等操作,可以此来对PDU的开关进行控制一 设置IP及循环变量    先设置一个IP,此IP一般为PDU的IP,可用于后续PC和它直接ping包确认是否通信......
  • 【专有网络VPC】DHCP选项集功能
    通过DHCP选项集功能,您可以为专有网络VPC中的云服务器ECS实例配置域名和DNS服务器IP地址。功能发布及地域支持情况公有云支持的地域区域支持DHCP选项集的地域亚太华东1(杭州)、华东2(上海)、华北1(青岛)、华北2(北京)、华北3(张家口)、华北5(呼和浩特)、华北6(乌兰察布)、华南1(深......
  • 安卓13可用的黄鸟神器(HttpCanary)
    安卓13可用的黄鸟神器(HttpCanary)MIUI14系统版本13(API33)设备XiaomiRedmi系统架构arm64-v8a4个安装包名称如下:1.HttpCanary3.3.6arm64-v8aMonet2.HttpCanary3.3.6armeabi-v7aMonet3.HttpCanary3.3.6x86Monet4.HttpCanaryb3.3.6x86_64Monet不知道系统架构的,打开L......
  • 大屏可视化:舞动数据与美观的“设计秘籍”
    大屏可视化鉴赏:踏入软件系统产品设计之旅,让我们一同鉴赏那些闪耀在智慧农业、智慧园区、智慧社区及智慧港口等领域的大屏可视化杰作。每一帧画面,都是科技与创新的完美融合,数据跃然屏上,智慧触手可及。>>数字乡村、美好农村现代化系统建设↓>>海港、港口现代化大屏系统建设......