位置: 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浏览器百度网盘插件)

  • 个人所得税账务处理分录
  • 关于办理退税手续的通知
  • 企业实收资本与股本区别
  • 增值税征税范围中销售应税服务包括什么服务
  • 银行转账支付凭证有效期多久
  • 小规模公司开票税点怎么算
  • 企业增资的分录怎么写
  • ktv发票可以入账吗
  • 高新技术企业费用认定
  • 淘宝手续费是什么意思
  • 外商投资企业合并
  • 应计利息会计分录处理
  • 专项土地补偿款怎么入账?
  • 支付职工一次性补助
  • 房地产开发桩基施工方案
  • 印花税申报完成后如何缴款
  • 退税上传,申报怎么操作
  • 营改增的重点是什么
  • 企业所得税如何缴纳
  • 生产经营活动包括建设项目吗
  • 外籍劳务费个税扣除标准
  • 收据能入账抵税吗
  • 公司投资理财需要纳税吗
  • 工会经费缴纳是当期
  • 外卖收入增值税怎么算
  • lsalss.exe
  • 桌面美化神器
  • Windows 11 CO-21H2 22000.194 正式版官方下载地址(附esd微软三语直链下载x64+arm64)
  • 业务招待费税前扣除标准按照发生额的60%扣除
  • 初品官网
  • 出差没有发票,会计如何入账
  • 含税价怎么计算增值税
  • 企业重组的特殊性税务处理 税屋
  • 委托加工物资验收入库的金额
  • 员工出差垫钱
  • 有关商品房质量的投诉,这些年一直
  • web自动化selenium实战项目
  • vue3安装配置
  • input输入改变边框颜色
  • HTTP 协议
  • php 输出
  • 在发生以下的情况下,可判定货物
  • python 捕捉窗口
  • 什么叫坏账准备
  • 企业所得税汇算清缴操作流程
  • 发票税额打印不全可以入账吗
  • 外贸企业收款有限额吗
  • 固定资产属于有形还是无形资产
  • 支付宝支付凭证在哪里查
  • 借款需要缴纳个人所得税吗
  • 公司买15万的车可以抵扣多少税
  • 无形资产开发阶段的支出应当全部资本化
  • sql for in
  • 变动成本法的计算步骤
  • 单位代个人交社保可以吗
  • 以前年度损益科目编码
  • 销售退回如何做账务处理
  • 对方开的增值税普票怎么查
  • 票据质押如何做账
  • 重分类调整分录是什么
  • 企业办理增资的程序
  • 发出商品属于存货的什么科目
  • mssql 优化
  • sqlserver允许一列列值重复
  • linux将文件a.txt更名为b.txt
  • WinXP巧用Netsh工具快速填写IP参数
  • 常见unix操作系统
  • win7怎么删除操作中心
  • windows打开
  • linux必知必会
  • 微软6月24
  • NGUI学习笔记(摘)
  • vue两个花括号
  • angularjs4
  • unity制作的2d游戏
  • jquery获取文件大小
  • 一种新的运算符号类型的题
  • easyui toolbar布局
  • 处级工作调动用什么手续
  • 租房协议中怎样签字
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设