位置: IT常识 - 正文

Vue3、vite项目页面自适应配置(postcss-plugin-px2rem、amfe-flexible)(vue项目页面写在哪里)

编辑:rootadmin
Vue3、vite项目页面自适应配置(postcss-plugin-px2rem、amfe-flexible)

推荐整理分享Vue3、vite项目页面自适应配置(postcss-plugin-px2rem、amfe-flexible)(vue项目页面写在哪里),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3.0项目,vue项目搭建好之后如何写页面,vue项目搭建好之后如何写页面,vue项目前端页面模板,vue3项目目录,vue项目搭建好之后如何写页面,vue3.0项目,vue项目搭建好之后如何写页面,内容如对您有帮助,希望把文章链接给更多的朋友!

文章目录前言:vite 如何处理 csspostcss项目配置下载相关包配置方案一方案二(备选方案)相关资料链接前言:vite 如何处理 css

vite 天生就支持对css文件的直接处理 关于预处理器

☀️目前,在工程化开发中,使用最多的应该就是Less、Sass和Stylus。 ☀️首先,还是介绍一下它们吧。它们有个统一的名字——css预处理器。 ☀️何为CSS预处理器?应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通 俗一点)。 ☀️它们的出现可以说是恰逢其时,解决了css的一些缺憾: 1、语法不够强大,不能够嵌套书写,不利于模块化开发 2、没有变量和逻辑上的复用机制,导致在css的属性值中只能使用字面量形式,以及不断重复书写重复 3、的样式,导致难以维护。

postcss

☀️vite 天生对postcss有非常好的支持 ☀️postcss => 保证css在执行起来是万无一失的 ☀️你可以在使用预处理器的情况下使用它,也可以在原生的css中使用它。 ☀️它都是支持的,并且它具备着一个庞大的生态系统,例如你可能常用的Autoprefixer,就是PostCSS ☀️的一个非常受欢迎的插件,被Google, Shopify, Twitter, Bootstrap和CodePen等公司广泛使用。

Vue3、vite项目页面自适应配置(postcss-plugin-px2rem、amfe-flexible)(vue项目页面写在哪里)

在这里就不用多说,后续会出单独一篇来讲这个东西,postcss是一个十分强大的工具

项目配置下载相关包npm install amfe-flexible -snpm i postcss-plugin-px2rem -s配置方案一

vite.config.js的关于这个的配置 没有这个文件可以在项目根目录创建这个文件,进行配置 注意:vite.config.js 配置 需要导入(看具体需要)

import { defineConfig, loadEnv} from "vite";import vue from "@vitejs/plugin-vue";

❤️ vite.config.js 部分配置

const px2remOptions = { rootValue: 14.4, //换算基数, 默认100 ,也就是1440px ,这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了 unitPrecision: 5, //允许REM单位增长到的十进制数字,其实就是精度控制 // propWhiteList: [], // 默认值是一个空数组,这意味着禁用白名单并启用所有属性。 // propBlackList: [], // 黑名单 // exclude:false, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值 // selectorBlackList: [], //要忽略并保留为px的选择器 // ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。 // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。 mediaQuery: false, //(布尔值)允许在媒体查询中转换px minPixelValue: 0 //设置要替换的最小像素值(3px会被转rem)。 默认 0}return defineConfig({ resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }] }, plugins: [vue()], base: process.env.VITE_APP_BASE, build: { outDir: 'dist', }, css: { postcss: { plugins: [px2rem(px2remOptions)] } } });

❤️ 我们剩下的就是动态修改html的font-size 创建utils/dom.js文件

import _ from 'lodash'// 以1920px 底图为准开发页面export const setDomFontSize = () => { let width = document.documentElement.clientWidth || document.body.clientWidth; let fontsize = (width <= 200 ? 1200 : width) / 100 + 'px'; (document.getElementsByTagName('html')[0].style)['font-size'] = fontsize;}let setDomFontSizeDebounce = _.debounce(setDomFontSize, 400)window.addEventListener('resize', setDomFontSizeDebounce); // 浏览器加入收缩监听防抖,重新计算rem配置

剩下的就是在main.js 里面引入并触发函数

import { setDomFontSize} from './utils/dom'setDomFontSize()

其实我们上面的方案的配置也可以写在单独的文件里

方案二(备选方案)

postcss.config.js 如果没有该文件就自己在项目根目录上创建postcss.config.js

module.exports = { plugins: [ require("autoprefixer"), require("postcss-plugin-px2rem")({ //rootValue: 19.2, //换算基数,1rem相当于10px,值为37.5时,1rem为20px,淘宝的flex默认为1rem为10px // unitPrecision: 5, //允许REM单位增长到的十进制数字。 //propWhiteList: [], //默认值是一个空数组,这意味着禁用白名单并启用所有属性。 propBlackList: ['font-size', 'border'], //黑名单 exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)\/如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值 // selectorBlackList: [], //要忽略并保留为px的选择器 // ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。 // replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。 mediaQuery: false, //(布尔值)允许在媒体查询中转换px。 minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0 }), ],};相关资料链接

B站教学vite教学视频 掘金好文-配置文章 掘金好文-谈谈PostCSS 深入学习postcss

本文链接地址:https://www.jiuchutong.com/zhishi/283985.html 转载请保留说明!

上一篇:Python之ImportError: DLL load failed: 找不到指定的模块解决方案

下一篇:edge浏览器被百度占用了如何解决?(edge浏览器百度网盘插件)

  • 如何将微信的语音合成为一个音频(如何将微信的语言改为中文)

    如何将微信的语音合成为一个音频(如何将微信的语言改为中文)

  • 电脑一会不动就黑屏(电脑一会不动就死机)

    电脑一会不动就黑屏(电脑一会不动就死机)

  • 如何隐藏通话详单个别电话(如何隐藏通话详单个别电话电信)

    如何隐藏通话详单个别电话(如何隐藏通话详单个别电话电信)

  • 手机QQ手机邮箱在哪里找到(手机qq里面邮箱)

    手机QQ手机邮箱在哪里找到(手机qq里面邮箱)

  • 微信群信息怎么屏蔽不了(微信群信息怎么置顶)

    微信群信息怎么屏蔽不了(微信群信息怎么置顶)

  • 笔记本电脑除号是哪个键(笔记本电脑除号在哪里)

    笔记本电脑除号是哪个键(笔记本电脑除号在哪里)

  • 摄像头不显示图像是怎么回事(摄像头不显示图像怎么调)

    摄像头不显示图像是怎么回事(摄像头不显示图像怎么调)

  • b站怎么小窗口播放(b站怎么小窗口看直播)

    b站怎么小窗口播放(b站怎么小窗口看直播)

  • 存储卡是如何存储数据的(存储卡该怎么用)

    存储卡是如何存储数据的(存储卡该怎么用)

  • 微信步数怎么更新(微信步数怎么更多)

    微信步数怎么更新(微信步数怎么更多)

  • 荣耀手环5无法同步睡眠数据(荣耀手环5无法绑定微信)

    荣耀手环5无法同步睡眠数据(荣耀手环5无法绑定微信)

  • oppoa11手机呼吸灯在哪(oppo手机呼吸灯一直闪烁怎么关闭)

    oppoa11手机呼吸灯在哪(oppo手机呼吸灯一直闪烁怎么关闭)

  • 华为mate20指纹在哪(mate20手机指纹)

    华为mate20指纹在哪(mate20手机指纹)

  • word文档文字怎么竖排(word文档文字怎么放大)

    word文档文字怎么竖排(word文档文字怎么放大)

  • 怎样把手机上的软件传到电视上(怎样把手机上的文件传到电脑上)

    怎样把手机上的软件传到电视上(怎样把手机上的文件传到电脑上)

  • 手机怎么设置虚拟地址(手机怎么设置虚拟定位?)

    手机怎么设置虚拟地址(手机怎么设置虚拟定位?)

  • 占位符在word哪里(word中占位符的作用)

    占位符在word哪里(word中占位符的作用)

  • qq在线文档怎么用(qq在线文档怎么发送)

    qq在线文档怎么用(qq在线文档怎么发送)

  • 遮罩和蒙版的区别(蒙版遮盖)

    遮罩和蒙版的区别(蒙版遮盖)

  • bkk-al10是什么型号(bkl -al10是什么型号)

    bkk-al10是什么型号(bkl -al10是什么型号)

  • wps文档忘记保存关闭了怎么恢复(wps文档忘记保存了还能找回吗)

    wps文档忘记保存关闭了怎么恢复(wps文档忘记保存了还能找回吗)

  • 华为nova5耳机孔在哪里(华为nova5耳机孔坏掉)

    华为nova5耳机孔在哪里(华为nova5耳机孔坏掉)

  • airpods带麦吗(airpods1有麦克风吗)

    airpods带麦吗(airpods1有麦克风吗)

  • 滴滴学生认证失败原因(滴滴学生认证不符合条件)

    滴滴学生认证失败原因(滴滴学生认证不符合条件)

  • 马赛马拉国家保护区中的非洲草原象,肯尼亚 (© Yva Momatiuk and John Eastcott/Minden Pictures)(马赛马拉国家保护区内动物)

    马赛马拉国家保护区中的非洲草原象,肯尼亚 (© Yva Momatiuk and John Eastcott/Minden Pictures)(马赛马拉国家保护区内动物)

  • vue3中使用swiper完整版教程(vue3中使用gis地图)

    vue3中使用swiper完整版教程(vue3中使用gis地图)

  • 每月计提什么费用
  • 企业所得税汇算清缴时间
  • 小规模纳税人免税会计分录
  • 银行电子承兑到期多久时间之内可以兑现
  • 今年成立的公司,残保金是否要申报
  • 开发票利润
  • 企业资金运动包括哪几个环节
  • 企业隐藏收入会受怎样处罚
  • 存货造成的损失
  • 地税能不能查到个人的贷款行为?
  • 进项税转出属于什么科目
  • 小规模代开增值税专票开错了如何处理?
  • 国税局公告2020年1号
  • 未及时申报个税的理由
  • 增值税简易征收一览表
  • 研发企业退税
  • 政府委托代建的房地产公司是否可以开立农民工工资
  • 利润表季度报表
  • 资本溢价最后转入哪里
  • 发放的工资比计提的多怎么办
  • 研发用的原材料怎么开领料单
  • 电梯维修公司发展前景
  • windows10命令提示符怎么用
  • 车间管理人员工资记什么费用
  • 财务报表包括哪几个表
  • 餐饮企业原材料的核算,新城饭店为增值税一般纳税人
  • windows 11预览版
  • win11怎么打开设置
  • 转让股权怎么做会计分录
  • 会计新准则讲解
  • igfxem.exe是什么进程
  • 跨年的发票作废重新开具需要入账
  • php中imagestring
  • 政府基金如何开立账户
  • 税务文书送达回证企业要盖章吗
  • 记录一次游戏
  • 公司基本户没有开户许可证
  • 简易html代码
  • 因果推断的常用标准
  • thinkphp跨域请求
  • 货款收不回来了怎么做账
  • 生产企业出口退税政策
  • 电子发票开出后如何查看
  • 税控系统维护费普通发票可以全额抵扣吗
  • 收到银联代收短信
  • 表单上传文件
  • zabbix安装部署
  • mysql存储过程 游标
  • 债权人豁免债务的账务处理会计分录
  • 存货盘亏毁损处理方法
  • 财政拨款方式有哪几种
  • 广告制作费怎么入账
  • 发票一直没验旧会有什么影响
  • 未付工资挂什么科目
  • 股东出资资本金可以是问别人借来的吗
  • 逾期的押金收入
  • 以前年度多计提成本怎么处理
  • 工程结算收入是否缴纳增值税
  • 房租没有发票如何交税
  • 其他应付款包括哪些内容
  • 本地发生住宿费怎么办
  • 物业管理公司如何应用节能新技术
  • 工程上第三方代表啥意思
  • 企业列支非本单位费用
  • ubuntu通讯软件
  • vista升级选项灰色
  • windows10正式版
  • asmproserver.exe是什么进程 asmproserver进程信息查询
  • win10 rs1是什么版本
  • win10一直弹werfault,程序也打不开
  • 笔记本win7电源已接通未充电怎么办
  • /proc目录造成linux根目录爆满
  • win7打开摄像头权限
  • opengl learning
  • 安卓十游戏怎么玩
  • C#绘制准心脚本
  • 如何进行js 的测试
  • JavaScript中的数据类型
  • 数据类型 python
  • 税务安装步骤
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设