VUE_自适应布局lib-flexible+postcss-pxtorem、lib-flexible + postcss-px2rem,nuxt页面自适配

news2024/9/29 5:30:36

lib-flexible + postcss-pxtorem适配


我采用的是flexable.js和postcss-pxtorem。我一开始用的是postcss-px2rem后来发现和nuxt引入公共css的时候发生了冲突所以改用了postcss-pxtorem。

安装依赖

npm i lib-flexible -S
npm install postcss-pxtorem --save

1、lib-flexible.js文件

2、再在nuxt.config.js里面配置plgins配置项

{src:'@plugins/lib-flexible.js',ssr:false}

3、引入postcss-pxtorem

postcss: {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 192,
      propList: ["*"],
      minPixelValue: 2
    }
  }
},

4、因为是pc端自适应,所以在 node_modules 文件夹下找到 lib-flexible文件中的 flexible.js

lib-flexible + postcss-px2rem适配

自测在使用element-ui时会和公共css库起冲突

安装依赖

npm i lib-flexible -S
npm i px2rem-loader -D
npm install postcss-px2rem save

 安装后执行上面(1、2、3、4)步骤

plugins: [
    {src:'@plugins/lib-flexible.js',ssr:false}
],

build: {
  postcss: [
    require('postcss-px2rem')({
      remUnit: 192  // 之所以写192是因为设了pc最大宽度1920px
    })
  ],
}

nuxt3适配:https://www.jianshu.com/p/fd9e9adbd649

..

.

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

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

相关文章

怎么在学习强国网上发布文章,学习强国投稿发稿方法途径,附学习强国多少钱价格明细表

学习强国是一款受用户欢迎的学习软件,许多人希望在其平台上发布自己的文章,以分享和传播自己的学习成果和心得体会。那么,怎么在学习强国网上发布文章呢?接下来,我们将介绍一些投稿发稿的方法和途径。 首先&#xff0c…

蓝桥杯刷题5--GCD和LCM

目录 1. GCD 1.1 性质 1.2 代码实现 2. LCM 2.1 代码实现 3. 习题 3.1 等差数列 3.2 Hankson的趣味题 3.3 最大比例 3.4 GCD 1. GCD 整数a和b的最大公约数是能同时整除a和b的最大整数,记为gcd(a, b) 1.1 性质 GCD有关的题目一般会考核GCD的性质。   …

Java开发从入门到精通(一):Java的进阶语法知识

Java大数据开发和安全开发 Java的方法1.1 方法是什么1.1.1 方法的定义1.1.2 方法如何执行?1.1.3 方法定义时注意点1.1.4 使用方法的好处是? 1.2 方法的多种形式1.2.1 无参数 无返回值1.2.2 有参数 无返回值 1.3 方法使用时的常见问题1.4 方法的设计案例1.4.1 计算1-n的和1.4.…

代码随想录刷题笔记 DAY 42 | 最后一块石头的重量 II No.1049 | 目标和 No.494 | 一和零 No.474

文章目录 Day 4301. 最后一块石头的重量 II&#xff08;No. 1049&#xff09;<1> 题目<2> 笔记<3> 代码 02. 目标和&#xff08;No. 494&#xff09;<1> 题目<2> 笔记<3> 代码 03. 一和零&#xff08;No. 474&#xff09;<1> 题目&l…

知名比特币质押协议项目Babylon确认参加Hack.Summit()2024区块链开发者大会

Babylon项目已确认将派遣其项目代表出席2024年在香港数码港举办的Hack.Summit()2024区块链开发者大会。作为比特币生态的领军项目&#xff0c;Babylon积极参与全球区块链领域的交流与合作&#xff0c;此次出席大会将为其提供一个展示项目进展、交流技术与创新思路的重要平台。B…

ssm游戏社交网站-计算机毕业设计源码05667

目 录 摘要 1 绪论 1.1 研究意义 1.2研究方法 1.3ssm框架 1.4论文结构与章节安排 2 2 游戏社交网站系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据增加流程 2.2.2 数据修改流程 2.2.3数据删除流程 2.3 系统功能分析 2.3.1功能性分析 2.3.2非功能性分析 2…

Intel® Extension for PyTorch*详细安装教程

最近在研究Intel的pytorch的加速拓展Intel Extension for PyTorch*,但是发现官网的文档全是英文的&#xff0c;不太好找安装教程。所以特此分享Intel Extension for PyTorch*的详细安装教程。 文章目录 一、安装所需系统要求1.1 硬件需求1.2 软件需求 二、准备2.1 安装驱动程序…

CVE-2024-27198 JetBrains TeamCity 身份验证绕过漏洞分析

漏洞简介 JetBrains TeamCity 是一款由 JetBrains 公司开发的持续集成和持续交付服务器。它提供了强大的功能和工具&#xff0c;旨在帮助开发团队构建、测试和部署他们的软件项目 JetBrains TeamCity发布新版本修复了两个高危漏洞JetBrains TeamCity 身份验证绕过漏洞(CVE-20…

【源码系列】基于SpringBoot的二手车交易系统的设计与实现

技术栈 用户端&#xff1a;uniapp&#xff08;vue语法&#xff09; 管理后台&#xff1a;vueelementUI 后台服务&#xff1a;SpringBootMyBatisPlusMySQL 版本支持&#xff1a;AndroidIOSH5小程序公众号 移动端 管理端

链表的基础

目录 顺序表 链表 需要注意的 链表的优势 单链表的实现 1.单链表的准备 2.单链表的结构体的创建 3.单链表的准备 4.前插 5.后插 6.后删 7.前删 8.任意位置前插 9.任意位置后插 10.删除 11.修改 12.打印 13.释放链表 总说链表难&#xff0c;但我感觉只要认真听讲…

10.网络文件系统( NFS)使用

网络文件系统&#xff08; NFS&#xff09; 使用 NFS 优点&#xff1a; 开发过程中不受开发板空间的限制&#xff0c;直接使用网络文件就像使用本地文件一样&#xff1b;调试过程中避免一一将编译后的应用程序和库文件复制到开发板上。 在开发板中使用网络文件系统可以为开发和…

python并发编程:异步IO(Asynchronous I/O)

异步IO(Asynchronous I/O) Linux下的asynchronous IO其实用得不多&#xff0c;从内核2.6版本才开始引入。先看一下它的流程&#xff1a; 用户进程发起read操作之后&#xff0c;立刻就可以开始去做其它的事。而另一方面&#xff0c;从kernel的角度&#xff0c;当它受到一个asyn…

Python实现ETS指标平滑模型(ETSModel算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 ETS模型&#xff08;Error-Trend-Seasonality Model&#xff09;&#xff0c;是一种广泛应用于时间序列…

蓝桥杯第一天

这题就是典型的位数贡献大于数量贡献&#xff0c; 1花的火柴更少&#xff0c;所以尽量用完10个1&#xff0c;然后其实就是简单的背包问题尽量拿最多的物品&#xff08;数字&#xff09;&#xff0c;限重为300&#xff0c;各物品&#xff08;数字&#xff09;的重量即为所需火柴…

数学建模-敏感度分析(美赛)

从多个不确定性因素中逐一找出对投资项目经济效益指标有重要影响的敏感性因素&#xff0c;并分析、测算其对项目经济效益指标的影响程度和敏感性程度&#xff0c;进而判断项目承受风险的能力。若某参数的小幅度变化能导致经济效益指标的较大变化&#xff0c;则称此参数为敏感性…

1572.矩阵对角线元素的和

刷算法题&#xff1a; 第一遍&#xff1a;1.看5分钟&#xff0c;没思路看题解 2.通过题解改进自己的解法&#xff0c;并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步&#xff0c;下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…

车载诊断协议DoIP系列 —— 传输层控制协议(TCP)用户数据报协议(UDP)

车载诊断协议DoIP系列 —— 传输层控制协议(TCP)&用户数据报协议(UDP) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎…

C++ 买卖股票问题

目录 买卖股票的最佳时机 买卖股票的最佳时机III 买卖股票的最佳时机 IV 买卖股票的最佳时机 II 买卖股票的最佳时机含手续费 买卖股票的最佳时机含冷冻期 买卖股票的最佳时机 121. 买卖股票的最佳时机 buy&#xff1a;手上有股票的最大收益 sell&#xff1a;手上没有股票…

蓝桥杯备战刷题five(自用)

1.数字三角形&#xff08;方向次数限制&#xff0c;动态规划&#xff09; //如果n为奇数时&#xff0c;最后必然走到最后行最中间的数&#xff0c;如果为偶数&#xff0c;则取中间两个数的最大值&#xff0c; //因为向左下走的次数与向右下走的次数相差不能超过 1 #include …

图腾柱PFC工作原理:一张图

视屏链接&#xff1a; PFC工作原理