简介:postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位。amfe-flexible是配置可伸缩布局方案,主要是将1rem设为viewWidth/10. 使用方法: 1、安装 使用yarn 安装: yarnaddpostcss-pxtorem@5.1.1amfe-flexible-S 或使用npm安装 npm install postcss-pxtorem@5.1.1amfe-flexible--save 2、创建vue...
1、安装amfe-flexible 和 postcss-pxtorem: npm i amfe-flexible 和 postcss-pxtorem -D //package.json { "name": "vite", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vue-tsc -b && vite build", "preview": "vite preview" },...
4、导入: 在main.js中引入amfe-flexible插件: import 'amfe-flexible'; 如下面: 引入amfe-flexible截图 三、最终效果截图:
amfe-flexible通常不需要额外的配置即可在Vue 3项目中工作。它会自动根据设备的宽度动态设置HTML根元素的font-size,从而为基于rem的响应式布局提供支持。 然而,如果你正在使用Vite作为构建工具,并且希望更细粒度地控制CSS处理,你可以在vite.config.js或vite.config.ts中添加postcss-pxtorem插件的配置,以便将px单位转换为...
1、使用amfe-flexible + postcss-pxtorem包实现px自动转换rem npm i amfe-flexible//用于设置 rem 基准值 npm install --save-dev postcss-loader postcss npm install postcss-pxtorem -D//是一款 postcss 插件,用于将px单位转化为 rem 2、在mian.js引入amfe-flexible ...
pnpm add amfe-flexible pnpm add postcss-pxtorem @types/postcss-pxtorem 2.使用npm安装:npm i amfe-flexible --save npm i postcss-pxtorem @types/postcss-pxtorem -D 在main.ts配置: import 'amfe-flexible'; 在vite.config.js配置: import postCssPxToRem from 'postcss-pxtorem' export default defineConf...
3、然后引入到项目 import ‘amfe-flexible’ 4、到这里适配基本解决,但是我们再写的时候量出来的尺寸都需要除以75rem,这样很烦,这时引入插件postcss-px2rem-exclude解决px2rem的问题,为什么引入postcss-px2rem-exclude,而不是px2rem-loader,当你引入第三方插件库的时候你就知道痛点了,这里先不解释原因,下面会解释...
安装amfe-flexible,并在main.js中引入 // 引入lib_flexible 使用rem import 'amfe-flexible' 1 22.安装 postcss-px2rem (npm i postcss-px2rem ) 3.在 vue.config.js 中添加配置,vue.config.js是自己在项目根目录下创建的。const px2rem = require('postcss-px2rem'); const postcss = px2rem({ ...
npm i amfe-flexible -D 1 4).在main.ts文件中 import 引入 import "amfe-flexible/index.js" 1 :可能会出现下面情况 [vite] Internal server error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer' 1 这时候尝试安装 autoprefixer就可以了 npm i autoprefixer 1版权...
在main.js 中 导入 import "amfe-flexible"; 在vite.config.js中配置 css: { postcss: { plugins: [ postcssPxtoRem({ rootValue:192,//根据使用的ui组件? 定义根元素大小?unitPrecision: 5, propList: ['*', "!border"],//可以从px更改为rem的属性selectorBlackList: ['.norem', "ignore"],//过滤...