vue3创建h5 项目使用rem做响应式的配置

news2024/9/27 15:32:20

第一步 安装依赖:

npm install amfe-flexible -S
npm install postcss-px2rem -S

第二步 main.ts文件中导入

import "amfe-flexible/index.js";

第三步 进行配置:

vue3 项目中创建 postcss.cinfig.js文件,这里是基于设计稿是750px的 如果是375的就写37.5

module.exports = {
   css: {
       loaderOptions: {
         css: {},
         postcss: {
       plugins: [
         require("postcss-px2rem")({
           remUnit: 75
         })
       ]
     }
       }
   }
}

vue2 项目进行配置的:找到根目录下的.postcss.js文件

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-url': {},
    // to edit target browsers: use "browserslist" field in package.json
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      // rootValue: 422.4,//对应设计图宽度4224*1296
      // rootValue: 192,//对应设计图宽度1920*1080
      rootValue: 75,
      propList: ['*', '!border*'] //  表示不匹配 要是想匹配边框之类的 可以在里面用 !border* 表示不配备边框,这样不会把边框1px变成1rem
    }
  }
}

第四步 vscode 安装pxtorem的插件 
第五步: 在项目中直接基于750的设计稿量出尺寸, 然后再将px转化为rem就可以了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1482822.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【k8s管理--两种方式安装prometheus】

1、k8s的监控方案 1.1 Heapster Heapster是容器集群监控和性能分忻工具,天然的支持Kubernetes和CoreOS。 Kubernetes有个出名的监控agent–cAdvisor。在每个kubernetes Node上都会运行cAdvisor,它会收集本机以及容器的监控数(cpu,memory,filesystem,ne…

java学习笔记-初级

完整笔记下载链接&#xff1a;https://download.csdn.net/download/qq_48257021/88800766?spm1001.2014.3001.5503 一、变量 1.双标签 <!-- 外部js script 双标签 --><script srcmy.js></script> 在新文件my.js里面写&#xff1a; 2.字符串定义&#xff…

【模型复现】自制数据集上复现目标检测域自适应 SSDA-YOLO

【模型复现】自制数据集上复现目标检测域自适应 SSDA-YOLO 1. 环境安装2. 数据集制作2.1 数据准备2.2 数据结构 3. 模型训练3.1 数据文件配置3.2 训练超参数配置3.3 模型训练 4. 模型验证4.1 验证超参数配置4.2 模型验证 5. 模型推理5.1 推理超参数配置5.2 模型推理 6. 踩坑记录…

智能驾驶规划控制理论学习03-基于采样的规划方法

目录 一、基于采样的规划方法概述 二、概率路图&#xff08;PRM&#xff09; 1、核心思想 2、实现流程 3、算法描述 4、节点连接处理 5、总结 三、快速搜索随机树&#xff08;RRT&#xff09; 1、核心思想 2、实现流程 3、总结 4、改进RRT算法 ①快速搜索随机图&a…

机器学习---主动学习

1. 概念区分 使用传统的监督学习方法做分类&#xff0c;往往训练样本规模越大&#xff0c;分类的效果越好。但是在现实生活中的 很多场景下&#xff0c;标记样本的获取较困难&#xff0c;需要领域内的专家进行人工标注&#xff0c;需要较大的时间成本和经 济成本。另外&…

R语言安装和简单入门HelloWorld用法

R语言安装和简单入门HelloWorld用法 #R语言安装地址 https://www.r-project.org/ click->CRAN mirror->选择China下列表&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/CRAN/ 选择Download R for Windows 选择base Download R-4.3.2 for Windows 下载文件R-4.3.2-…

Java SPI:Service Provider Interface

SPI机制简介 SPI&#xff08;Service Provider Interface&#xff09;&#xff0c;是从JDK6开始引入的&#xff0c;一种基于ClassLoader来发现并加载服务的机制。 一个标准的SPI&#xff0c;由3个组件构成&#xff0c;分别是&#xff1a; Service&#xff1a;是一个公开的接口…

K线实战分析系列之十四:三只乌鸦,行情趋弱,留意风险

K线实战分析系列之十四&#xff1a;三只乌鸦&#xff0c;行情趋弱&#xff0c;留意风险 一、三只乌鸦二、三只乌鸦形态总结 一、三只乌鸦 理想的三只乌鸦形态 向下的跳空更显示出盘面的弱势 二、三只乌鸦形态总结 三只乌鸦形态由三根K线组成&#xff0c;都是阴线&#xff…

激光雷达原理

全球汽车行业正在进行自动化变革&#xff0c;这将彻底改变交通运输的安全和效率水平。 戴姆勒在S级豪华车型中引入L3级自动驾驶&#xff08;L3&#xff0c;在特定条件下自动驾驶&#xff0c;人类驾驶员一旦被请求就会随时接管&#xff09;是自动驾驶革命的一个重大突破。其他多…

Redis 存储原理和数据模型

redis 是不是单线程 redis 单线程指的是命令处理在一个单线程中。主线程 redis-server&#xff1a;命令处理、网络事件的监听。 辅助线程 bio_close_file&#xff1a;异步关闭大文件。bio_aof_fsync&#xff1a;异步 aof 刷盘。bio_lazy_free&#xff1a;异步清理大块内存。io_…

fly-barrage 前端弹幕库(3):滚动弹幕的设计与实现

项目官网地址&#xff1a;https://fly-barrage.netlify.app/&#xff1b; &#x1f451;&#x1f40b;&#x1f389;如果感觉项目还不错的话&#xff0c;还请点下 star &#x1f31f;&#x1f31f;&#x1f31f;。 Gitee&#xff1a;https://gitee.com/fei_fei27/fly-barrage&a…

电子电器架构新趋势 —— 最佳着力点:域控制器

电子电器架构新趋势 —— 最佳着力点&#xff1a;域控制器 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师&#xff08;Wechat&#xff1a;gongkenan2013&#xff09;。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师…

Ubuntu进入python时报错:找不到命令 “python”,“python3” 命令来自 Debian 软件包 python3

一、错误描述 二、解决办法 进入”/usr/bin”目录下&#xff0c;查看/usr/bin目录中所有与python相关的文件和链接&#xff1a; cd /usr/bin ls -l | grep python 可以看到Python3指向的是Python3.10&#xff0c;而并无指向python3的软连接 只需要在python与python3之间手动…

探索数字未来:DApp钱包Defi引领新纪元

​小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 随…

LINUX基础培训二十八之Shell正则表达式

一、何为正则表达式 在编写处理字符串的程序或网页时&#xff0c;经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说&#xff0c;正则表达式就是记录文本规则的代码。 在Windows/Dos下用于文件查找的通配符&#xff08; wildcard…

借助ChatGPT使用Python搭建一个工具网站

文章目录 前言网站搭建过程总结 前言 不知不觉ChatGPT已经风靡一年多了&#xff0c;现在基本每天工作时都会用到&#xff0c;相比于传统的搜索引擎它究竟强在哪呢&#xff1f;我觉得以往的搜索引擎是一个机器&#xff0c;你给它关键信息它能返回匹配关键词的内容数据&#xff…

【C语言】动态内存管理常用函数

前言 我们在之前学习的数组开辟的空间是固定不变的&#xff0c;有时候我们需要的空间⼤⼩在程序运⾏的时候才能知道~ c语言中的动态内存开辟&#xff0c;让程序员⾃⼰可以根据实际需求申请和释放相应空间&#xff0c;这使得空间的开辟变得灵活了许多。 欢迎关注个人主页&#x…

管家婆云上管家新帐套建立步骤

第一步&#xff0c;客户服务管理&#xff1b; 第二步&#xff0c;添加帐套&#xff1b; 第三步&#xff0c;点击“管理”进入&#xff1b;第四步&#xff0c;添加帐套信息&#xff1b; 第五步&#xff0c;找到客户&#xff0c;查看帐套信息&#xff1b; 第六步&#xff0c;确认…

微服务简介及其相关技术栈

目录 1、简介 2、技术栈 3、单体架构 4、分布式架构 5、微服务 6、总结 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&#xff0c;初步涉猎Pyth…

【Java实战项目】SpringBoot + Vue3打造你的在线电子书平台!

今天给大家分享一个基础的Java实战项目&#xff0c;用SpringBoot和Vue3开发一个电子书平台&#xff0c;大家可以尝试做一下这个项目&#xff0c;以此来检验这段时间的学习成果&#xff01;废话不多说&#xff0c;下面正式进入项目&#xff1a; 一、项目介绍 1. 项目简介 在线…