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

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})],
}

..

.

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

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

相关文章

FreeRTOS学习笔记——列表和列表项及其API函数讲解

目录 精华总结: 列表和列表项 架构脑图: 列表和列表项的简介 列表的结构 列表项 迷你列表项 列表和列表项的关系 FreeRTOS 列表和列表项相关 API 函数 架构脑图: 列表和列表项相关 API 函数 函数 vListInitialise() 函数 vListIni…

IR 召回测试数据集(中文测试集)——T2Ranking

文章排名包括两个阶段:文章检索和文章重排序,这对信息检索(IR)领域的学术界和业界来说都是重要而具有挑战性的课题。然而,常用的文章排名数据集通常集中在英语语言上。对于非英语场景,如中文,现…

云犀首款AI直播调参大模型重磅发布,智能破解直播三大难!

3月7日晚,云犀重磅发布首款AI大模型——云犀墨子AI直播调参大模型!据悉云犀墨子是一款懂直播的调参大模型,这项技术深度融合了机器学习、计算机视觉以及进步的图像处理算法,赋予直播间画面AI智能调控能力。 此次云犀墨子AI直播调参…

Imagination大学计划 rv-fpga实验安装教程及注意事项

1. 实验环境安装 1.1 vivado 2019.2 网盘链接:Vivado_2019.2.tar.gz_免费高速下载|百度网盘-分享无限制 (baidu.com) 安装教程: 网盘中vivado文件夹下载到本地后解压打开,导航到下图,打开xsetup.exe文件。如果打开后有小弹窗直接…

论文阅读之Multimodal Chain-of-Thought Reasoning in Language Models

文章目录 简介摘要引言多模态思维链推理的挑战多模态CoT框架多模态CoT模型架构细节编码模块融合模块解码模块 实验结果总结 简介 本文主要对2023一篇论文《Multimodal Chain-of-Thought Reasoning in Language Models》主要内容进行介绍。 摘要 大型语言模型(LLM…

重生奇迹mu战士大师技能加点怎么加

1、在重生奇迹MU中,战士大师的技能加点需要根据个人的游戏风格和需求来决定。一般来说,战士大师可以优先加点力量和体力,以增加攻击和生存能力。同时,可以适当加点敏捷来提高闪避和命中率。 2、在技能方面,可以根据个人…

数组的内存执行原理

一.Java内存分配介绍 JVM虚拟机会在内存中执行程序 java内存分配介绍 方法区,栈,堆 首先将编译过后的.class文件送入方法区中。当类开始运行时将方法调入栈内存中,变量也是属于方法的,因此同方法一起进入栈内存中。当main方法要…

Word背景图片设置,提升文章美观度的4个小技巧!

“我才刚开始使用Word,想问问大家Word中背景图片应该怎么设置呢?有什么比较好用的设置方法可以分享一下吗?” 在日常办公中,我们经常需要使用Word来对文件进行处理。在编写Word时,如果给文档加入背景图片,会…

[pcie]通过sysfs访问PCI设备资源

通过sysfs访问PCI设备资源 参考文档: https://www.kernel.org/doc/html/next/translations/zh_CN/PCI/sysfs-pci.html

直播相机,AI纪元!云犀首款AI直播相机重磅发布!

3月7日晚,云犀重磅发布首款AI直播相机-云犀智瞳Pro!据悉该相机内置了云犀首款AI直播调参大模型,能够通过AI分析智能调节直播间参数,赋予直播间画面AI智能调控能力。 云犀AI直播相机,让直播更简单 此次云犀AI直播相机的…

企业业务在ERP系统中的流程分析

ERP系统能将企业的信息流、资金流、物流等进行统一管控,并且可以通过它优化企业的业务流程。本文主要介绍企业的一些业务在ERP中的流程设置。 首先是销售管理业务,销售管理以销售部门为核心,仓库、财务部门为辅助,偶尔需要生产、质…

mysql中insert … select锁范围

1、执行 insert … select 的时候,对目标表也不是锁全表,而是只锁住需要访问的资源。 例如, CREATE TABLE t (id int(11) NOT NULL AUTO_INCREMENT,c int(11) DEFAULT NULL,d int(11) DEFAULT NULL,PRIMARY KEY (id),UNIQUE KEY c (c) ) EN…

无人值守设备如何高效运维?向日葵这几个远控功能你必须了解

户外广告牌、无人售货机、商场可交互的指引大屏、各种智能自助办事终端.... 上述无人值守设备,想必我们已经非常熟悉了,在科技不断发展的今天,这些设备在商业中已经逐渐成为中坚力量,并且承载着企业的一线业务。 而从企业IT运维…

一 windso10 笔记本刷linux cent os7.9系统

1:准备材料 16G以上U盘, 笔记本一台 镜像选了阿里云镜像:centos-7-isos-x86_64安装包下载_开源镜像站-阿里云 软件:链接:https://pan.baidu.com/s/13WDp2bBU1Pdx4gRDfmBetg 提取码:09s3 2:把镜像写入U盘,本人已经写入好了,选择镜像,点开始就是,确定等…

Mysql 学习(十五)redo 日志

redo 日志 什么是redo日志?在说这个之前我们先来想一个场景,在访问磁盘的页面之前,我们会先把页面缓存到Buffer Pool之后,才会访问。写页面的时候也会先将buffer pool中的页面修改之后,然后在某个时机才会刷新到磁盘中…

java项目开发过程中,栈溢出错误的解决方式

项目场景: 背景: 使用 idea 开发java项目时,栈溢出错误的解决方式。 问题描述 问题: Handler dispatch failed; nested exception is java.lang.StackOverflowErrororg.springframework.web.util.NestedServletException: Hand…

邮件发送API使用指南?怎么选邮件api接口?

邮件发送api接口是什么?如何自定义API接口发信域名? 通过邮件发送API,我们可以轻松实现邮件的批量发送、个性化定制以及实时追踪等功能。AokSend将详细介绍邮件发送API的使用方法和注意事项,帮助您更好地利用这一工具&#xff0c…

植物病害识别:YOLO茶叶病害识别数据集

茶叶病害识别数据集,3200多张茶叶病害图像数据,yolo标注完整,适用于茶叶病害识别,包含藻斑病、褐斑病、鸟眼斑病,炭疽病,红斑病5个类别。 增强方式:(3倍增强) 剪切&…

基于apicloud+vue的汽车服务系统设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 课题背景 3 1.1 课题的研究背景与意义 3 1.2研究现状 3 1.3本章小结 4 2 系统开发相关技术 5 2.1 ApiCloud开发工具 5 2.2 MVC架构模型 5 2.3 MySQL数据库 5 2.4 Hibernate、Spring框架 6 2.5 本章小结 6 3 系统分析 7 3.1 系统需求分析 …

Transformer中Self-Attention的详细解读

Transformer最早是在论文《Attention is All You Need》中提出的,目前已广泛应用于NLP领域,如语言翻译、文本分类、问答系统等。由于在产品规划中需要使用这样的模型结构,因此花了一些时间对其进行了一些学习理解。 除了阅读论文及配套的代码…