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

vue做移动端自适应插件实现rem

1.实现方式

postcss-pxtorem:将px转换为rem

amfe-flexible:为html、body提那家font-size,窗口调整的时候重新设置font-size

2.安装与使用 

npm install amfe-flexible --save

npm install postcss-pxtorem --save-dev

 1.再main.js入口文件引入

// 引入amfe-flexible 根据窗口调整html-font-size大小

import 'amfe-flexible'

2.创建postcss.config.js配置文件

module.exports = {plugins: {autoprefixer: {},// flexible配置"postcss-pxtorem": {"rootValue": 75, //设计稿宽度的1/10"mediaQuery": false, // 禁止转换媒体查询中的像素值"propList": ["*"] //需要做转化处理的属性,如`hight`、`width`、`margin`、`*`表示全部}}}

注意点:
(1)rootValue根据设计稿宽度除以10进行设置,这边假设设计稿为370,即rootValue设为37.5;

(2)propList是设置需要转换的属性,这边*为所有都进行转换。

如果出现报错,降低版本

"dependencies":{

        "amfe-flexible":"^2.2.1",
        "postcss-pxtorem":"^5.1.1",

}

相关文章:

vue做移动端自适应插件实现rem

1.实现方式 postcss-pxtorem:将px转换为rem amfe-flexible:为html、body提那家font-size,窗口调整的时候重新设置font-size 2.安装与使用 npm install amfe-flexible --save npm install postcss-pxtorem --save-dev 1.再main.js入口文件…...

android 快速实现 图片获取并裁剪(更换头像)

1.获取图片框架:https://github.com/LuckSiege/PictureSelector 2.图片裁剪框架:https://github.com/jdamcd/android-crop 3.Glide图片加载框架:https://github.com/bumptech/glide 2.build.gradle依赖: dependencies {// Pic…...

垃圾回收机制--GC 垃圾收集器--JVM调优-面试题

1.触发垃圾回收的条件 新生代 Eden区域满了,触发young gc (ygc)老年代区域满了,触发full gc (fgc)通过ygc后进入老年代的平均大小大于老年代的可用内存,触发full gc(fgc).程序中主动调用的System.gc()强制执行gc,是full gc,但是不必然执行。…...

Java基础知识总结(29)

Java虚拟机 运行时数据区 程序计数器 方法区:Java 8以后没有方法区,改为了元空间(MetaSpace) 虚拟机栈 堆 本地方法栈 程序计数器 它可以看作是当前线程所执行的字节码的行号指示器。在Java虚拟机的概念模型里&#xff0c…...

vue js金额转中文

在Vue.js项目中,实现金额转中文的功能通常涉及编写一个JavaScript方法来处理数字转换逻辑,并在Vue组件中调用该方法。下面是一个基本的示例,展示如何在Vue组件中定义一个计算属性或方法来实现这一功能: /*** 思路: …...

《QT实用小工具·二》图片文字转base64编码

1、概述 源码放在文章末尾 base64编码转换类 图片转base64字符串。base64字符串转图片。字符转base64字符串。base64字符串转字符。后期增加数据压缩。Qt6对base64编码转换进行了重写效率提升至少200%。 下面是demo演示: 项目部分代码如下所示: #ifn…...

Django安装及第一个项目

1、安装python C:\Users\leell>py --version Python 3.10.6 可以看出我的环境python的版本3.10.6,比较新 2、 Python 虚拟环境创建 2.1 官网教程 目前,有两种常用工具可用于创建 Python 虚拟环境: venv 在 Python 3.3 及更高版本中默…...

专升本-物联网

物联网(IOT,Internet of things) 体系结构: 感知层(感知执行层) 网络层 应用层 基本特征: 全面感知 可靠传输 智能处理 作用: 信息采集、转换、收集 信息传递和处理 数据…...

二叉树的遍历C语言

二叉树作为FDS课程最核心的数据结构之一,要求每个人都掌握! 这是一道简单的二叉树问题! 我们将给出一颗二叉树,请你输出它的三种遍历,分别是先序遍历,中序遍历,后序遍历! 输入格式…...

PostgreSQL到Doris的迁移技巧:实时数据同步新选择!

PostgreSQL可以说是目前比较抢手的关系型数据库了,除了兼具多样功能和强大性能之外,还具备非常优秀的可扩展性,更重要的是它还开源,能火不是没有理由的。 虽然PostgreSQL很强大,但是它也有短板,相对于专业…...

【三维】关于万向节锁的直白解释

1. 分析理解 万向节长什么样子,请参考这篇文章中的图片:https://zhuanlan.zhihu.com/p/42519819。 看了很多篇解释性的文章,没怎么看懂。因为我个人最关注的问题点在于: 现实物体旋转为什么没有所谓的万向节锁的bug&#xff0c…...

程序员的修养 - 变量

变量几乎代码程序程序 中最基础的组成单元,程序员几乎无时无刻都在接触变量。但你对变量的理解真的足够吗? 首先,什么是变量?! 第一层理解:一个可以改变的量,区别于常量,用户可以修…...

判断一个元素是否在可视区域中

文章目录 一、用途二、实现方式offsetTop、scrollTop注意 getBoundingClientRectIntersection Observer创建观察者传入被观察者 三、案例分析 参考文献 一、用途 可视区域即我们浏览网页的设备肉眼可见的区域,如下图 在日常开发中,我们经常需要判断目标…...

【Monero】Wallet RPC | Wallet CLI | 门罗币命令行查询余额、种子、地址等命令方法教程

ubuntu22.04 首先在运行daemon,详细安装运行教程可参考:The Monero daemon (monerod) ./monerodWallet CLI run ./monero-wallet-cli如果还没有钱包就根据提示创建钱包即可 输入密码 查询余额 balance查询种子 seed其他可执行命令操作&#xff1…...

FPGA----ZCU106的petalinux 2019.1使用USB传输数据

1、实际项目中需要用到开发板的串口进行数据交互,之前讲的几节只是启动了网口(如下链接)。因此,本次给大家带来的官方自带串口例程的使用方法,本文的vivado工程和下述连接一样,PL端什么配置都没有。 FPGA-…...

备考ICA----Istio实验10---为单个主机配置TLS Istio Ingress Gateway实验

备考ICA----Istio实验10—为单个主机配置 TLS Istio Ingress Gateway实验 1. 环境准备 部署httpbin kubectl apply -f istio/samples/httpbin/httpbin.yaml 2. 证书生成 2.1 生成根证书 生成根证书keyfile和crt文件 mkdir example_certs_root openssl req -x509 -sha256 …...

【4】单链表(有虚拟头节点)

【4】单链表(有虚拟头节点) 1、虚拟头节点2、构造方法3、node(int index) 返回索引位置的节点4、添加5、删除6、ArrayList 复杂度分析(1) 复杂度分析(2) 数组的随机访问(3) 动态数组 add(E element) 复杂度分析(4) 动态数组的缩容(5) 复杂度震荡 7、单链…...

html第二次作业

骨架 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, initi…...

Android客户端自动化UI自动化airtest从0到1搭建macos+脚本设计demo演示+全网最全最详细保姆级有步骤有图

iOS客户端自动化UI自动化airtest从0到1搭建macosdemo演示-CSDN博客 一、基础环境 1. 安装jdk 选择jdk8 如果下载高版本 可能不匹配会失败 下载.dmg文件 苹果电脑 &#xff5c; macOS &#xff5c; jdk1.8 &#xff5c; 环境变量配置_jdk1.8 mac-CSDN博客 Java Downloads …...

基于单片机的自动浇灌系统的设计

本文设计了一款由单片机控制的自动浇灌系统。本设计的硬件电路采用AT89C51单片机作为主控芯片,采用YL-69土壤湿度传感器检测植物的湿度。通过单片机将采集湿度值与设定值分析处理后,控制报警电路和水泵浇灌电路的开启,从而实现植物的自动浇灌。 1 设计目的 随着生活水平的…...

手把手教你用CCS v10为F280049C配置工程:从零搭建、RAM/FLASH切换、到数学库调用的完整流程

F280049C开发实战&#xff1a;CCS v10工程配置与RAM/FLASH切换全指南 第一次接触TI C2000系列DSP时&#xff0c;面对CCS开发环境和复杂的工程配置&#xff0c;很多开发者都会感到无从下手。本文将以F280049C这款高性价比DSP为例&#xff0c;带你从零开始搭建开发环境&#xff…...

硬件感知虚拟原型技术:软硬件协同设计的关键

1. 硬件感知虚拟原型技术概述在当今电子系统设计中&#xff0c;软件所占比重持续攀升。从通信设备到汽车电子&#xff0c;再到消费类产品&#xff0c;嵌入式软件已成为实现产品差异化的核心要素。这种转变源于软件实现的显著优势&#xff1a;低成本的设计变更、现场更新能力、快…...

AI编程助手代码质量守护:Quality Guardian MCP实战指南

1. 项目概述&#xff1a;为AI编程助手打造的“质量守门员”如果你和我一样&#xff0c;日常重度依赖 Claude Code、Cursor 这类 AI 编程助手来写代码&#xff0c;那你肯定也遇到过这个头疼的问题&#xff1a;助手写的代码&#xff0c;语法上没问题&#xff0c;但一跑静态检查&a…...

2026年主流地图API AI功能开发与零代码工具横评

核心观点摘要 行业趋势判断&#xff1a;AI与零代码正深度融合地图API开发&#xff0c;推动位置智能从专业编码向业务自助快速演进&#xff0c;2026年主流平台将在多模态数据融合与行业化场景能力上形成分水岭。选型关键维度&#xff1a;需综合考量数据覆盖广度、模型智能水平、…...

运营商网络工程师视角:VoWiFi部署中的ePDG与AAA服务器配置要点及避坑指南

运营商网络工程师实战&#xff1a;VoWiFi部署中ePDG与AAA服务器配置的20个关键细节 当运营商开始规划VoWiFi网络时&#xff0c;会议室的白板上总是画满了各种接口和协议栈。但真正决定项目成败的&#xff0c;往往是那些容易被忽略的配置细节——比如IKEv2协商时DH组的选择会怎样…...

Windows系统优化神器:3步解决C盘爆红和电脑卡顿难题

Windows系统优化神器&#xff1a;3步解决C盘爆红和电脑卡顿难题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否曾经遇到过Windows电脑C盘空间不足的困扰&a…...

OpenClaw-Zulip桥接器:实现AI Agent与团队协作工具的无缝集成

1. 项目概述&#xff1a;一个为AI Agent打造的Zulip消息桥梁如果你正在构建一个基于OpenClaw的AI Agent系统&#xff0c;并且你的团队恰好使用Zulip作为内部沟通工具&#xff0c;那么你很可能面临一个痛点&#xff1a;如何让Agent无缝地融入团队的日常对话流&#xff1f;是让团…...

LangGraph多智能体系统运维:从部署到监控的自动化方案

LangGraph多智能体系统运维:从部署到监控的全链路自动化方案 一、引言 钩子:你是否也踩过LangGraph上线的这些坑? 上周接到某企业AI团队的紧急求助:他们基于LangGraph搭建的客户服务多智能体系统上线仅3小时就全线崩溃,1.2万条用户咨询全部卡住,技术团队排查了2个小时才…...

5月17日搜狐科技年度论坛将启,近三十位嘉宾共探科学本源与AI未来

搜狐科技论坛&#xff1a;汇聚顶尖智慧&#xff0c;探索科学与AI前沿5月17日&#xff0c;2026搜狐科技年度论坛即将在北京盛大开幕。届时&#xff0c;来自科学界、学术界和产业界的近三十位嘉宾将齐聚一堂&#xff0c;共同探索基础科学的奥秘&#xff0c;解答人工智能带来的时代…...

GitHub企业版MCP服务器:为AI助手集成私有化GitHub工作流

1. 项目概述&#xff1a;一个为开发者定制的GitHub企业版MCP服务器如果你是一名重度依赖GitHub Enterprise进行团队协作的开发者&#xff0c;并且正在探索如何将AI助手&#xff08;比如Claude、Cursor等&#xff09;无缝集成到你的日常开发工作流中&#xff0c;那么你很可能已经…...