vite+vue3 css scss PC移动布局自适应
1. 安装 postcss-pxtorem 和 autoprefixer
npm install postcss-pxtorem autoprefixer --save
2. vite.config.js引入并配置
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'export default defineConfig({base: './',resolve: {alias},plugins: [vue()],css: {postcss: { // 关键代码plugins: [postCssPxToRem({ // 自适应,px>rem转换rootValue: 16, // 1rem的大小propList: ['*'], // 需要转换的属性,这里选择全部都进行转换}),autoprefixer({ // 自动添加前缀overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8"//'last 2 versions', // 所有主流浏览器最近2个版本],grid: true})]}}
})
4. 在根目录src下建立文件夹utils,然后创建rem.js文件 并在main.js中引入
- PC端 rem.js
// 自适应
const baseSize = 16;
function resize() {// 当前页面屏幕分辨率相对于1920宽的缩放比例,可根据自己需要修改let scale = document.documentElement.clientWidth / 1920;// 下面这一行代码可以忽略,这是我另外加的,我加这行代码是为了屏幕宽度小于1280时就不继续等比缩放了if (document.documentElement.clientWidth < 1280) scale = 1280 / 1920// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 1)}px`;
}
resize();
window.onresize = resize;
- 移动端rem.js
// 自适应function resize() {let fs = document.body.clientWidth / 75; // 上面的75是根据设计图尺寸修改,例如设计图宽为1220,给左右两边各留10px,即1220-20=1200,1200/16(字体大小)等于75if (fs > 16) { // 控制字体大小,以免过大过小fs = 16;} else if (fs < 14) {fs = 14;}// 👇注意这里不能直接document.body.styledocument.body.parentNode.style = "font-size: " + fs + "px;";}resize();window.onresize = resize;
- main.js 引入
import './utils/rem.js'
- 也可直接写在App.vue里
<template><div id="app"></div>
</template> <script setup>// 自适应function resize() {let fs = document.body.clientWidth / 75; // 上面的75是根据设计图尺寸修改,例如设计图宽为1220,给左右两边各留10px,即1220-20=1200,1200/16(字体大小)等于75if (fs > 16) { // 控制字体大小,以免过大过小fs = 16;} else if (fs < 14) {fs = 14;}// 👇注意这里不能直接document.body.styledocument.body.parentNode.style = "font-size: " + fs + "px;";}resize();window.onresize = resize;
</script>
相关文章:
vite+vue3 css scss PC移动布局自适应
1. 安装 postcss-pxtorem 和 autoprefixer npm install postcss-pxtorem autoprefixer --save2. vite.config.js引入并配置 import postCssPxToRem from postcss-pxtorem import autoprefixer from autoprefixerexport default defineConfig({base: ./,resolve: {alias},plug…...
BLE配对和绑定
参考:一篇文章带你解读蓝牙配对绑定 参考:BLE安全之SM剖析(1) 参考:BLE安全之SM剖析(2) 参考:BLE安全之SM剖析(3) 目录 前言基本概念解读Paring(配对)Bonding(绑定)STK短期秘钥、LTK长期秘钥等 …...
无涯教程-jQuery - html( val )方法函数
html(val)方法设置每个匹配元素的html内容。此属性在XML文档上不可用。 html( val ) - 语法 selector.html( val ) 这是此方法使用的所有参数的描述- val - 这是要设置的html内容。 html( val ) - 示例 以下是一个简单的示例,简单说明了此方法的用法- <…...
【单链表OJ题:删除链表中等于给定值 val 的所有节点】
1.删除链表中等于给定值 val 的所有节点 题目来源 给你一个链表的头节点 head 和一个整数 val ,请你删除链表中所有满足 Node.val val 的节点,并返回 新的头节点 。 /*** Definition for singly-linked list.* struct ListNode {* int val;* s…...
vue element ui web端引入百度地图,并获取经纬度
最近接到一个新需要,要求如下: 当我点击选择地址时,弹出百度地图, 效果如下图: 实现方法: 1、首先要在百度地图开放平台去申请一个账号和key 2、申请好之后,在项目的index.html中引入 3、…...
25.10 matlab里面的10中优化方法介绍—— 函数fmincon(matlab程序)
1.简述 关于非线性规划 非线性规划问题是指目标函数或者约束条件中包含非线性函数的规划问题。 前面我们学到的线性规划更多的是理想状况或者说只有在习题中,为了便于我们理解,引导我们进入规划模型的一种情况。相比之下,非线性规划会更加贴近…...
赛效:如何将PDF文件免费转换成Word文档
1:在网页上打开wdashi,默认进入PDF转Word页面,点击中间的上传文件图标。 2:将PDF文件添加上去之后,点击右下角的“开始转换”。 3:稍等片刻转换成功后,点击绿色的“立即下载”按钮,将…...
java 8 的Stream API
Java 8中引入了Stream API,它是一种处理集合数据的新方式,可以用来处理集合中的元素。Stream API通过提供一组函数式接口和方法,可以使集合的处理更加简洁、高效和易读。 Stream API的主要特点如下: 延迟执行:Stream …...
TypeChat,用TypeScript快速接入AI大语言模型
TypeChat是C# 和 TypeScript 之父 Anders Hejlsberg全新的开源项目。使用AI在自然语言和应用程序和API之间建立桥梁,并且使用TypeScript。 现在出现了很多大型语言模型,但是如何将这些模型最好地集成到现有的应用程序中,如何使用人工智能来接…...
Dcoker compose单机容器集群编排管理
目录 一、概述 二、compose 部署 lnmp 1.Docker Compose 环境安装 2.YAML 文件格式及编写注意事项 3.Docker Compose配置常用字段 4.Docker Compose 常用命令 5. 配置lnmp集群依赖文件 6.修改docker-compose.yml文件 7.根据yml文件创建lnmp容器 一、概述 Docker compos…...
P5635 【CSGRound1】天下第一(记忆化搜索)
用short类型二维数组防止MLE。这里用的记忆化搜索,如果f[x][y]已经有值了,直接返回这个值。判断error的方法:如果下一次又访问到它,说明出现了循环,这样是永远%不到0的,所以,第一次访问一次f[x]…...
如何维护你的电脑:提升性能和延长使用寿命
如何维护你的电脑:提升性能和延长使用寿命 😇博主简介:我是一名正在攻读研究生学位的人工智能专业学生,我可以为计算机、人工智能相关本科生和研究生提供排忧解惑的服务。如果您有任何问题或困惑,欢迎随时来交流哦&…...
Docker续集+Docker Compose
目录 Containerd与docker的关系 runCrunC与Containerd的关联 OCI协议Dockerfile多阶段构建(解决:如何让一个镜像变得更小 )多阶段构建Images瘦身实践.dockerignore Docker Compose快速开始Quick StartCompose 命令常用命令命令说明 Compose 模…...
k8s deployment(k8s经典版)|PetaExpress
Deployment是什么? Deployment是指在软件开发中将应用程序或系统部署到目标环境中的过程。它包括将代码编译、配置、打包并安装到目标服务器或设备上的步骤。k8s deployment是(k8s经典版)中用来管理发布的控制器,在开发的过程中使…...
uni-app如何生成正式的APK
第一步: 进入dcloud官网https://dcloud.io/,点击开发者后台进入登录注册页面 第二步:登录之后跳到项目列表,选择自己想要打包的项目 点击进去如果没有生成证书,点击生成证书,如果显示证书已生成就不用管了…...
低代码开发平台源码:可视化敏捷开发工具,拖拽式自定义表单界面
低代码开发平台源码 低代码管理系统源码 无需代码或通过少量代码就可以快速生成应用程序的开发平台。 本套低代码管理后台可以支持多种企业应用场景,包括但不限于CRM、ERP、OA、BI、IoT、大数据等。无论是传统企业还是新兴企业,都可以使用管理后台快速构…...
利用读时建模等数据分析能力,实现网络安全态势感知的落地
摘要:本文提出一种基于鸿鹄数据平台的网络安全态势感知系统,系统借助鸿鹄数据平台读时建模、时序处理、数据搜索等高效灵活的超大数据存储和分析处理能力,支持海量大数据存储、分类、统计到数据分析、关联、预测、判断的网络安全态势感知能力…...
六、代理模式
文章目录 一、代理模式1、代理模式的好处和缺点1.1 代理模式理解加深 一、代理模式 为什么要学习代理模式? 代理模式是Spring AOP 以及 Spring MVC 的底层!!并且还是 JAVA 的23种设计模式之一!! 代理模式的分类&#…...
Easy Glide
题意:给出起点终点坐标,然后给出可以经过的几个点,未经过这几个点的时候以v1的速度前进,一旦经过这些点就可以在3秒内以v2的速度前进,3秒之后恢复v1,问从起点到终点所需的最短时间 思路:最短路…...
ppt怎么压缩到10m以内?分享好用的压缩方法
PPT是一种常见的演示文稿格式,有时候文件过大,我们会遇到无法发送、上传的现象,这时候简单的解决方法就是压缩其大小,那怎么才能将PPT压缩到10M以内呢? PPT文件大小受到影响的主要因素就是以下几点: 1、图…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
第25节 Node.js 断言测试
Node.js的assert模块主要用于编写程序的单元测试时使用,通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试,通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
Spring是如何解决Bean的循环依赖:三级缓存机制
1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间互相持有对方引用,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...
