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

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配对和绑定

参考&#xff1a;一篇文章带你解读蓝牙配对绑定 参考&#xff1a;BLE安全之SM剖析(1) 参考&#xff1a;BLE安全之SM剖析&#xff08;2&#xff09; 参考&#xff1a;BLE安全之SM剖析(3) 目录 前言基本概念解读Paring(配对)Bonding(绑定&#xff09;STK短期秘钥、LTK长期秘钥等 …...

无涯教程-jQuery - html( val )方法函数

html(val)方法设置每个匹配元素的html内容。此属性在XML文档上不可用。 html( val ) - 语法 selector.html( val ) 这是此方法使用的所有参数的描述- val - 这是要设置的html内容。 html( val ) - 示例 以下是一个简单的示例&#xff0c;简单说明了此方法的用法- <…...

【单链表OJ题:删除链表中等于给定值 val 的所有节点】

1.删除链表中等于给定值 val 的所有节点 题目来源 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 /*** Definition for singly-linked list.* struct ListNode {* int val;* s…...

vue element ui web端引入百度地图,并获取经纬度

最近接到一个新需要&#xff0c;要求如下&#xff1a; 当我点击选择地址时&#xff0c;弹出百度地图&#xff0c; 效果如下图&#xff1a; 实现方法&#xff1a; 1、首先要在百度地图开放平台去申请一个账号和key 2、申请好之后&#xff0c;在项目的index.html中引入 3、…...

25.10 matlab里面的10中优化方法介绍—— 函数fmincon(matlab程序)

1.简述 关于非线性规划 非线性规划问题是指目标函数或者约束条件中包含非线性函数的规划问题。 前面我们学到的线性规划更多的是理想状况或者说只有在习题中&#xff0c;为了便于我们理解&#xff0c;引导我们进入规划模型的一种情况。相比之下&#xff0c;非线性规划会更加贴近…...

赛效:如何将PDF文件免费转换成Word文档

1&#xff1a;在网页上打开wdashi&#xff0c;默认进入PDF转Word页面&#xff0c;点击中间的上传文件图标。 2&#xff1a;将PDF文件添加上去之后&#xff0c;点击右下角的“开始转换”。 3&#xff1a;稍等片刻转换成功后&#xff0c;点击绿色的“立即下载”按钮&#xff0c;将…...

java 8 的Stream API

Java 8中引入了Stream API&#xff0c;它是一种处理集合数据的新方式&#xff0c;可以用来处理集合中的元素。Stream API通过提供一组函数式接口和方法&#xff0c;可以使集合的处理更加简洁、高效和易读。 Stream API的主要特点如下&#xff1a; 延迟执行&#xff1a;Stream …...

TypeChat,用TypeScript快速接入AI大语言模型

TypeChat是C# 和 TypeScript 之父 Anders Hejlsberg全新的开源项目。使用AI在自然语言和应用程序和API之间建立桥梁&#xff0c;并且使用TypeScript。 现在出现了很多大型语言模型&#xff0c;但是如何将这些模型最好地集成到现有的应用程序中&#xff0c;如何使用人工智能来接…...

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。这里用的记忆化搜索&#xff0c;如果f[x][y]已经有值了&#xff0c;直接返回这个值。判断error的方法&#xff1a;如果下一次又访问到它&#xff0c;说明出现了循环&#xff0c;这样是永远%不到0的&#xff0c;所以&#xff0c;第一次访问一次f[x]…...

如何维护你的电脑:提升性能和延长使用寿命

如何维护你的电脑&#xff1a;提升性能和延长使用寿命 &#x1f607;博主简介&#xff1a;我是一名正在攻读研究生学位的人工智能专业学生&#xff0c;我可以为计算机、人工智能相关本科生和研究生提供排忧解惑的服务。如果您有任何问题或困惑&#xff0c;欢迎随时来交流哦&…...

Docker续集+Docker Compose

目录 Containerd与docker的关系 runCrunC与Containerd的关联 OCI协议Dockerfile多阶段构建&#xff08;解决&#xff1a;如何让一个镜像变得更小 &#xff09;多阶段构建Images瘦身实践.dockerignore Docker Compose快速开始Quick StartCompose 命令常用命令命令说明 Compose 模…...

k8s deployment(k8s经典版)|PetaExpress

Deployment是什么&#xff1f; Deployment是指在软件开发中将应用程序或系统部署到目标环境中的过程。它包括将代码编译、配置、打包并安装到目标服务器或设备上的步骤。k8s deployment是&#xff08;k8s经典版&#xff09;中用来管理发布的控制器&#xff0c;在开发的过程中使…...

uni-app如何生成正式的APK

第一步&#xff1a; 进入dcloud官网https://dcloud.io/&#xff0c;点击开发者后台进入登录注册页面 第二步&#xff1a;登录之后跳到项目列表&#xff0c;选择自己想要打包的项目 点击进去如果没有生成证书&#xff0c;点击生成证书&#xff0c;如果显示证书已生成就不用管了…...

低代码开发平台源码:可视化敏捷开发工具,拖拽式自定义表单界面

低代码开发平台源码 低代码管理系统源码 无需代码或通过少量代码就可以快速生成应用程序的开发平台。 本套低代码管理后台可以支持多种企业应用场景&#xff0c;包括但不限于CRM、ERP、OA、BI、IoT、大数据等。无论是传统企业还是新兴企业&#xff0c;都可以使用管理后台快速构…...

利用读时建模等数据分析能力,实现网络安全态势感知的落地

摘要&#xff1a;本文提出一种基于鸿鹄数据平台的网络安全态势感知系统&#xff0c;系统借助鸿鹄数据平台读时建模、时序处理、数据搜索等高效灵活的超大数据存储和分析处理能力&#xff0c;支持海量大数据存储、分类、统计到数据分析、关联、预测、判断的网络安全态势感知能力…...

六、代理模式

文章目录 一、代理模式1、代理模式的好处和缺点1.1 代理模式理解加深 一、代理模式 为什么要学习代理模式&#xff1f; 代理模式是Spring AOP 以及 Spring MVC 的底层&#xff01;&#xff01;并且还是 JAVA 的23种设计模式之一&#xff01;&#xff01; 代理模式的分类&#…...

Easy Glide

题意&#xff1a;给出起点终点坐标&#xff0c;然后给出可以经过的几个点&#xff0c;未经过这几个点的时候以v1的速度前进&#xff0c;一旦经过这些点就可以在3秒内以v2的速度前进&#xff0c;3秒之后恢复v1&#xff0c;问从起点到终点所需的最短时间 思路&#xff1a;最短路…...

ppt怎么压缩到10m以内?分享好用的压缩方法

PPT是一种常见的演示文稿格式&#xff0c;有时候文件过大&#xff0c;我们会遇到无法发送、上传的现象&#xff0c;这时候简单的解决方法就是压缩其大小&#xff0c;那怎么才能将PPT压缩到10M以内呢&#xff1f; PPT文件大小受到影响的主要因素就是以下几点&#xff1a; 1、图…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...