在Vue3+TS项目中使用postcss-pxtorem插件进行移动端适配,可以按照以下步骤进行: 安装依赖: 首先,需要安装postcss-loader、postcss-pxtorem以及amfe-flexible。amfe-flexible用于设置根元素的font-size,而postcss-pxtorem则用于将px转换为rem。 bash npm install postcss-loader postcss-pxtorem amfe-flexible --save-dev ...
导入CSS文件:style-loader将CSS代码注入到HTML文件的style标签中,使其能够生效。 转换TypeScript代码:ts-loader将TypeScript代码转换为JavaScript代码,并交给babel-loader处理。 与plugin区别 类型与侧重点不同:loader是一个函数,主要功能是告诉webpack如何加载一个资源,比如告诉webpack一个vue文件如何转...
使用postcss-pxtorem 适配移动端时,超过750,固定尺寸显示 创建一个 js 或 ts 文件 (名字我是叫rem,是放在util文件夹下,具体你们按照自己的风格命名就可以了) constbaseSize =37.5//跟postcss.config.js中rootValue的值是一致的// 设置 rem 函数functionsetRem() {// 当前页面宽度相对于 375 宽的缩放比例,可根...
rem.ts// 基准大小 const baseSize = 16; // 设置 rem 函数 function setRem() { // 当前页面宽度相对于 1920 宽的缩放比例,可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920; // 设置页面根节点字体大小, 浏览器字体大小最小为12 ↓ 采用下面 ...
通过使用stylelint强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法,也包括类似 CSS 的语法,例如 SCSS 。 1.6、可以把px转为rem。 二、安装 pnpm add autoprefixer postcss postcss-pxtorem 三、nuxt.config.ts ...
1.6、可以把px转为rem。 二、安装 pnpm add autoprefixer postcss postcss-pxtorem 三、nuxt.config.ts postcss: {plugins: {// 这个工具可以实现自动添加CSS3前缀"autoprefixer": {overrideBrowserslist: ["last 5 version", ">1%", "ie >=8"]},'postcss-pxtorem': {rootValue: 37.5, // 指定转换倍率,...
2.在vite.config.ts文件中添加以下内容: import postCssPxToRem from "postcss-pxtorem"; ... css: { postcss: { plugins: [ postCssPxToRem({ rootValue: 192, // (设计稿/10)1rem的大小 propList: ["*", "!border","!font-size"], // 除 border/font-size 外所有px 转 rem ...
1. 2. 如果报错,则需要指定postcss-pxtorem版本,如: npm install postcss-pxtorem@5.1.1 --save-dev 使用 在main.ts入口文件引入 import 'lib-flexible' 1. vue.config.js loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ // 把px单位换算成rem单位 ...
1. 安装postcss-pxtorem npm i -S postcss-pxtorem 2.在package.json同级目录下新建.umirc.ts 3. .umirc.ts内容如下 constpxtorem=require('postcss-pxtorem')exportdefault{extraPostCSSPlugins:[pxtorem({rootValue:37.5,//这里根据设计稿大小配置,一般是375propList:['*']}),]} ...
首先是安装依赖 yarn add postcss-loader postcss-pxtorem -D yarn add autoprefixer-D 然后新建postcss.config.js文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 exportconst plugins = { 'plugins': { ...