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

vue 项目自适应 配置 px转rem 的插件postcss-pxtorem

1、安装

npm i postcss-plugin-px2rem --save -dev --force
  1. 找到 postcss.config.cjs 没有的话就新建一个
module.exports = {plugins: {// to edit target browsers: use "browserslist" field in package.jsonautoprefixer: {},"postcss-plugin-px2rem": {rootValue: 16, // 设计稿宽度的 1/10propBlackList: ["border","border-top","border-left","border-right","border-bottom",], // 不需要转换为 rem 单位的 CSS 属性},},
};
  1. 在src->utils->新建文件rem.js
// 基准大小
const baseSize = 16;
// 设置 rem 函数
function setRem() {// 当前页面宽度相对于 1920 宽的缩放比例,可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920;// 设置页面根节点字体大小document.documentElement.style.fontSize =baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {setRem();
};
  1. main.js中引入rem.js
import './utils/rem.js' // 缩放自适应

如果报错 在这里插入图片描述
安装autoprefixer

npm i autoprefixer

根目录下文件里面postcss.config.cjs

module.exports = {plugins: {autoprefixer: {}}
};

相关文章:

vue 项目自适应 配置 px转rem 的插件postcss-pxtorem

1、安装 npm i postcss-plugin-px2rem --save -dev --force找到 postcss.config.cjs 没有的话就新建一个 module.exports {plugins: {// to edit target browsers: use "browserslist" field in package.jsonautoprefixer: {},"postcss-plugin-px2rem":…...

股票程序化交易是,第三方软件申请券商私有接口API的门槛

炒股自动化:申请官方API接口,散户也可以 python炒股自动化(0),申请券商API接口 python炒股自动化(1),量化交易接口区别 Python炒股自动化(2):获取…...

JDK8的一些主要的新特性

JDK8(Java Development Kit 8) 是一个重要的版本,带来了许多显著的特性和改进,极大地提升了 Java 语言的功能性和开发效率。以下是 JDK 8 的一些主要新特性: 一、Lambda 表达式 1.简化匿名内部类的写法,…...

40岁的java程序员,还有出路吗?

目录 前言一、现状与挑战二、出路与机遇三、案例分析与启示四、结语 前言 40岁Java程序员的出路:挑战与机遇并存 在科技日新月异的今天,IT行业始终保持着高速的发展态势,而Java作为其中的重要一员,其地位依然稳固且充满挑战。对…...

【服务器】shell脚本之Docker创建nginx

#!/bin/bash# 定义目标目录和配置文件路径 BASE_DIR"/opt/docker/nginx"ETC_DIR"$BASE_DIR/etc" ETC_CONF_DIR"$ETC_DIR/conf.d" SSL_DIR"$ETC_CONF_DIR/ssl" LOG_DIR"$BASE_DIR/log"HTML_DIR"$BASE_DIR/html"C…...

提取蛋白质复合体结构中组装体的变换矩阵

PDB文件中,组装体变换矩阵(assembly transformation matrices)用于描述多聚体结构中各个单体之间的相对位置和取向。从蛋白质复合体 PDB 数据中提取每个组装体(assembly)的变换矩阵,通常需要解析 PDB 文件中…...

java程序员入行科目一之CRUD轻松入门教程(一)

之前在操作MySQL的时候,都是采用Navicat,或者cmd黑窗口。 无论使用什么方式和MySQL交互,大致步骤是这样的 建立连接,需要输入用户名和密码编写SQL语句,和数据库进行交互 这个连接方式不会变,但是现在需要 基…...

OpenHarmony鸿蒙开发( Beta5.0)智能油烟机开发实践

样例简介 本Demo是基于Hi3516开发板,使用开源OpenHarmony开发的应用。本应用主要功能有: 可以搜索本地指定目录的图片和视频文件,并可进行点击播放。 可以通过wifi接收来自手机的美食图片以及菜谱视频,让我们对美食可以边学边做…...

【GBase 8c V5_3.0.0 分布式数据库常用维护命令】

一、查看数据库状态/检查(gbase用户) 1.gha_ctl monitor 使用gha_ctl monitor查看节点运行情况(跟dcs的地址和端口) gha_ctl monitor -c gbase -l http://172.20.10.8:2379 -Hall |coordinator | datanode | gtm | server|dcs:必选字段。指定查看哪类集…...

破解AI生成检测:如何用ChatGPT降低论文的AIGC率

学境思源,一键生成论文初稿: AcademicIdeas - 学境思源AI论文写作 降低论文的“AIGC率”是个挑战,但有一些策略可以尝试。使用ChatGPT逐步调整和改进内容,使其更加自然和原创,降低AI检测工具识别出高“AIGC率”的概率…...

Python用MarkovRNN马尔可夫递归神经网络建模序列数据t-SNE可视化研究

原文链接:https://tecdat.cn/?p37634 本文聚焦于利用马尔可夫递归神经网络(MarkovRNN)结合树库展开建模工作。MarkovRNN 通过整合马尔可夫特性与离散随机变量来深入探索递归神经网络中的随机转换机制,旨在高效处理具有复杂潜在信…...

setup函数子传父普通写法

父组件 <template><div><p>接收的数据: {{ receivedData }}</p><Demo4Chiren2 custom-event"handleGetWeb" /></div> </template><script> import { ref } from vue; import Demo4Chiren2 from ./demo4Chiren2.vue…...

seafaring靶场漏洞测试攻略

步骤一&#xff1a;打开网页 一&#xff1a;sql注入漏洞 步骤一&#xff1a;测试回显点 -1 union select 1,2,3# 步骤二&#xff1a;查看数据库 -1 union select 1,2,database()# 步骤三&#xff1a;查看表名 -1 union select 1,2,group_concat(table_name) from informati…...

简单示例,搞懂PowerBI的ALL(),ALLEXCEPT()和ALLSELECTED()的区别

假设我们有如下数据&#xff0c;我们来统计下各班级的人数 我们在报表页里加上 班级’二班‘ 的筛选条件&#xff0c;此时PowerBI已经自动为我们显示了各班级人数&#xff1a;一班有3人&#xff0c;二班有1人。 根据我们的筛选条件&#xff0c;我们的统计人数应该是按照筛选器&…...

Collection

java.util.Collections:是集合工具类 作用&#xff1a;Collections不是集合&#xff0c;而是集合的工具类 常用API addAll package Collections;import java.util.ArrayList; import java.util.Collections;public class CollectionsDemo {public static void main(String[]…...

19章 泛型

1.修改程序清单19-1中的GenericStack类&#xff0c;使用数组而不是ArrayList来实现它。你应该在给栈添加新元素之前检查数组的大小如果数组满了&#xff0c;就创建一个新数组。该数组是当前数组大小的两倍&#xff0c;然后将当前数组的元素复制到新数组中。 public class Gene…...

基于python+django+mysql+Nanodet检测模型的水稻虫害检测系统

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…...

计算机网络27、28——Linux命令1、2

1、虚拟机网络前方路径内容 用户名机器名&#xff1a;/$ $表示普通用户&#xff0c;#表示root用户 2、Linux不分盘&#xff0c;都是绝对路径 /表示根目录&#xff0c;表示计算机文件夹下 ~是当前用户的家&#xff0c;表示home文件夹下自己的文件夹 3、bin文件夹下的是可执…...

【Python深度学习】逆强化学习(IRL):通俗揭开学习背后的奥秘

逆强化学习:揭开学习背后的奥秘 1. 引言 当我们谈论人工智能(AI)时,很多人第一时间会想到强化学习。强化学习是一种让智能体通过与环境的互动,逐渐学习到如何做出最优决策的学习方法。然而,有一种更加神奇的学习方式叫做 逆强化学习(Inverse Reinforcement Learning,…...

Linux:五种IO模型

1&#xff1a;五种IO模型 1&#xff1a;阻塞IO 阻塞IO: 在内核将数据准备好之前,系统调用会一直等待.所有的套接字,默认 都是阻塞方式。 2&#xff1a;非阻塞 IO 非阻塞 IO: 如果内核还未将数据准备好, 系统调用仍然会直接返回, 并且返回EWOULDBLOCK 错误码。 非阻塞 IO 往往需…...

动态规划专练:力扣第509、70、746题

由于对动态规划DP算法 掌握得不是很好&#xff0c;所以决定进行动态规划专项训练。动态规划五部曲①确定dp[i]含义②递推公式③dp数组如何初始化④遍历顺序⑤打印dp数组&#xff08;debug&#xff09;除了第五条在力扣上不开会员无法实现外&#xff0c;其余四项就是做出dp类型题…...

计算机毕业设计springboot研友帮系统设计与实现 基于SpringBoot的考研互助社区平台开发与实现 SpringBoot框架下研究生学术协作系统的设计与应用

计算机毕业设计springboot研友帮系统设计与实现w2zpm5oh &#xff08;配套有源码 程序 mysql数据库 论文&#xff09; 本套源码可以在文本联xi,先看具体系统功能演示视频领取&#xff0c;可分享源码参考。 随着研究生招生规模的持续扩大&#xff0c;考研竞争日益激烈&#xff0…...

解锁Online3DViewer:浏览器端3D模型可视化的核心价值与实践指南

解锁Online3DViewer&#xff1a;浏览器端3D模型可视化的核心价值与实践指南 【免费下载链接】Online3DViewer A solution to visualize and explore 3D models in your browser. 项目地址: https://gitcode.com/gh_mirrors/on/Online3DViewer 在数字化设计与开发领域&am…...

别再傻傻分不清了!用例图中的‘包含’和‘扩展’关系,用这个外卖点餐例子一下就懂了

外卖点餐中的UML用例图&#xff1a;用"包含"和"扩展"关系拆解用户旅程 每次打开外卖App时&#xff0c;那些看似简单的点击操作背后&#xff0c;其实隐藏着精密的系统设计逻辑。对于刚接触UML的开发者来说&#xff0c;理解用例图中的"包含"&#…...

【权威认证|Pydantic v2+Starlette v1.12+FastAPI 2.0深度兼容报告】:为什么你的async generator在/ai/chat接口里静默失败?

第一章&#xff1a;FastAPI 2.0 异步 AI 流式响应 避坑指南FastAPI 2.0 对异步流式响应&#xff08;StreamingResponse&#xff09;的底层行为进行了关键调整&#xff0c;尤其在事件循环绑定、响应体缓冲策略及客户端断连检测方面与 1.x 版本存在显著差异。若沿用旧版流式生成器…...

从原理到实践:Matlab相机标定参数详解与坐标变换全流程

1. 相机标定基础概念与Matlab工具箱实战 刚接触相机标定的朋友可能觉得那些参数看着就头疼&#xff0c;其实拆解开来并不复杂。我最早做机器人视觉项目时&#xff0c;也是被各种矩阵绕得晕头转向&#xff0c;直到自己动手标定了十几台工业相机才摸清门道。相机标定的本质就是建…...

联合仿真模型验证:Carsim + 车辆动力学模型(十四自由度)实践

联合仿真模型验证Carsim车辆动力学模型(十四自由度)软件使用:Carsim2019.0Matlab/Simulink 适用场景:采用模块化建模方法&#xff0c;搭建14自由度整车模型&#xff0c;将此模型与carsim进行联合仿真模型验证。 (模型和 carsim存在一定误差) 产品 simulink源码包含如下模块:工况…...

Centos stream 9 安装后root不能远程登录问题

如果在安装Centos stream 9的时候没有"勾选允许root用户使用密码进行ssh登录",安装后使用xshell等远程工具是不能登录虚拟机或者服务器的。解决&#xff1a;vim /etc/ssh/sshd_config1.新增一行配置&#xff1a; PermitRootLogin yes2.重启ssh systemctl restart ssh…...

手把手教你用XTTS v2克隆自己的声音:从录音到生成的完整避坑指南

零基础玩转XTTS v2语音克隆&#xff1a;从录音到生成的保姆级实战手册 1. 语音克隆技术的前世今生 语音合成技术&#xff08;TTS&#xff09;的发展已经走过了数十年的历程。从早期的机械式发音到如今的神经网络语音合成&#xff0c;技术的进步让语音克隆变得越来越自然。XTTS …...

MGeo地址要素解析模型惊艳效果展示:省市区街道门牌号全自动识别案例集

MGeo地址要素解析模型惊艳效果展示&#xff1a;省市区街道门牌号全自动识别案例集 1. 引言&#xff1a;当AI“读懂”你的地址 你有没有遇到过这样的场景&#xff1f;填写快递单时&#xff0c;把“XX省XX市XX区XX街道XX号”一股脑儿写进去&#xff0c;结果系统识别不出来&…...