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

第一步 安装依赖:

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就可以了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

好用的免费的文章一键生成神器

在当今信息爆炸的时代,创作内容是数字营销、网站运营等领域的核心。为了满足日益增长的内容需求,许多GPT生成的软件应运而生,它们能够帮助用户快速生成各种类型的文章,为创作提供了便利和效率。本文将介绍8款不同的免费文章一键生…

springboot3.x 以上,官方不建议使用spring.factories

springboot2.7.x 以上,官方不建议使用spring.factories 最近公司项目升级.需要将springcloud/springboot版本升级到2.7.x以上,再升级的过程中遇到了太多的问题.总结在了如下文章中: springboot艰难版本升级之路!! springboot 2.3.x版本升级到2.7.x版本 这篇文章就重点是梳理一…

力扣180 连续出现的数字

如何有效地识别在数据库中至少连续出现三次的数字? 目录 题目描述 解题思路 完整代码 进一步探索 题目描述 表:Logs ---------------------- | Column Name | Type | ---------------------- | id | int | | num | varch…

安科瑞智慧消防产品在酒店行业的应用

摘要:进入 21 世纪以来,随着网络技术的发展,世界经济呈现全球化趋势,作为消费者衣食住行的重要组成部分,酒店行业也是生活服务市场重要的组成部分。在经济发展的环境下,在旅游业兴起的趋势下,酒…

vue系列——vscode,node.js vue开发环境搭建

第一步安装node.js 推荐使用nvm进行node.js 的安装 nvm(Node.js version manager) 是一个命令行应用,可以协助您快速地 更新、安装、使用、卸载 本机的全局 node.js 版本。 可以去网上查找相关版本 我这里使用 nvm-setu… 链接:https://pan.baidu.com/s/1UEUtmzw5x…

私域运营的7个关键策略

1.通过私域工具实现标签,话术,聚合聊天等 2、公域获客,私域精准化运营,变现解决方案 3、标签化运营,筛选不同层级客户,根据对方需求提供解决方案 4、做私域需要坚持,不断累计信任 5、高复购…

matplotlib——折线图(python)

前言 在学习数据分析前,一定要有python基础,不一定要非常熟练的掌握这门语言,但一定要对python有个大概的了解(就像我一样,大一学过python,但是现在忘的差不多了,但是没关系,有个大…

MYSQL 解释器小记

解释器的结果通常通过上述表格展示: 1. select_type 表示查询的类型 simple: 表示简单的选择查询,没有子查询或连接操作 primary:表示主查询,通常是最外层的查询 subquery :表示子查询,在主查询中嵌套的查询 derived: 表示派…

vue2 开发记录

el-select 如何修改选择项的样式/el-select-dropdown__item 文字上下显示 测试代码 <div stylemargin-left: 100px><!-- 测试代码--><el-select filterablesizemini><div classxxx-el-select><el-optionv-foritem in [{key:1,des:2,…

构建产业图谱,实现产业链精准招商!

​产业链招商是一种以产业链为基础的招商引资方式&#xff0c;它不仅仅关注单个企业的引入&#xff0c;而是侧重于整个产业链的布局和发展&#xff0c;通过吸引产业链上下游相关企业共同入驻&#xff0c;形成产业集群&#xff0c;从而提升地区或园区的产业竞争力和经济效益&…

数据之光:探索数据库技术的演进之路

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

Linux - 基本指令

1、ls 指令 语法&#xff1a;ls [选项][目录或文件] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xff0c;将列出文件名以及其他信息。 常用选项&#xff1a; -a 列出目录下的所有文件&#xff0c;包括以 . 开头的隐含文件-l …

重塑计算:ICP 打造无限智能合约云解决方案

作者&#xff1a;Lynn Cadet 编译&#xff1a;TinTinLand 原文&#xff1a;https://www.hostingadvice.com/blog/internet-computer-offers-a-limitless-smart-contract-cloud-solution/ 摘要&#xff1a;与其前身互联网一样&#xff0c;区块链行业寻求引领一个新时代及其经济…

力扣-跳跃游戏

问题 给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 解答 class Solu…

linux系统Jenkins工具添加自由项目和maven项目

Jenkins添加自由项目 添加自由项目操作流程代码远程代码邮件标题邮件正文 添加maven项目准备环境操作流程 添加自由项目 gitlab配置基本代码页面等&#xff0c;拉取代码&#xff0c;打包&#xff0c;发布操作流程 代码 远程代码 echo ssh root192.168.188.177 "tar cz…

C++的常用排序(未完待续)

注&#xff1a;本文以升序为例 一、冒泡排序 1.1 操作方法 步骤1比较相邻元素&#xff0c;如果前者比后者大&#xff0c;则交换它们。步骤2对头到尾&#xff0c;对所有元素按序执行一轮这样的操作(这样可以找到第一最大值)步骤3再从第一个元素开始&#xff0c;重复上述比较操…

数据可视化基础与应用-02-基于powerbi实现连锁糕点店数据集的仪表盘制作

总结 本系列是数据可视化基础与应用的第02篇&#xff0c;主要介绍基于powerbi实现一个连锁糕点店数据集的仪表盘制作。 数据集描述 有一个数据集&#xff0c;包含四张工作簿&#xff0c;每个工作簿是一张表&#xff0c;其中可以销售表可以划分为事实表&#xff0c;产品表&am…

Python 在Word中查找并高亮指定文本

当你需要在长文档或报告中快速找到特定的关键词或短语&#xff0c;Word中提供的查找并高亮这一功能可以帮助你迅速定位这些内容。本文将介绍如何使用Python在Word中查找并突出显示指定的文本。 所需工具&#xff1a;第三方库 Spire.Doc for Python。该库支持创建、编辑、转换Wo…

笔记72:关于IMU(惯性测量单元)传感器的作用【不涉及公式推导】

一、IMU传感器是什么&#xff1a; 惯性测量单元IMU&#xff08;Inertial Measurement Unit&#xff09;是一种使用【加速度计】和【陀螺仪】来测量【物体三轴姿态角&#xff08;空间姿态&#xff09;】的装置&#xff1b;IMU在坐标系的每个坐标轴上&#xff0c;均安装有1个陀螺…

Zabbix“专家坐诊”第231期问答

问题一 Q&#xff1a;用docker-compose部署zabbix&#xff0c;部署完后如果要修改zabbix的配置应该要改docker-compose文件里的环境变量吧&#xff1f;改了环境变量之后只能重建容器才能生效吗&#xff1f;能不能在不影响已经配好的那些监控项的情况下让新的环境变量生效&#…