vue-cli3项目使用px2rem插件做自适应

第一步，安装插件

npm install postcss-px2rem px2rem-loader --save

第二步，在根目录src中新建util目录下新建px2rem.js等比适配文件

// rem等比适配配置文件
// 基准大小 1rem = 16px 基于1920px
const baseSize = 16
// 设置 rem 函数
function setPx2Rem() {// 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setPx2Rem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {setPx2Rem()
}

第三步，在main.js中引入适配文件

import "./utils/px2rem"

第四步，到vue.config.js中配置插件

// 引入等比适配插件
const px2rem = require('postcss-px2rem')// 配置基本大小
const postcss = px2rem({// 基准大小 baseSize，需要和rem.js中相同remUnit: 16
})// 使用等比适配插件
module.exports = {lintOnSave: true,css: {loaderOptions: {postcss: {plugins: [postcss]}}}
}

注意：安装了postcss-px2rem但是影响了ui组件的样式

1. postcss-px2rem不能忽略指定文件需要安装postcss-px2rem-exclude（安装前需要先卸载postcss-px2rem）

npm uninstall postcss-px2remnpm i postcss-px2rem-exclude -D

2. 在项目搭建的时候要选择配置文件的位置了

对于 Babel 、 PostCSS 等，都可以有自己的配置文件： .babelrc 、 .postcssrc 等等或者也可以把配置信息放在 package.json 里面

3. 要是选择独立配置文件的直接在根目录下 postcss.config.js内修改

exclude 就是要忽略的文件

module.exports = {plugins: {autoprefixer: {},"postcss-px2rem-exclude": {"remUnit": 16,"exclude": /node_modules/i}}
}

其他和postcss-px2rem配置一样

vue-cli3项目使用px2rem插件做自适应相关推荐

Vue Cli3 项目 vue.config.js 配置
Vue Cli3 项目 vue.config.js 配置配置优化一.js文件最小化处理二.分割代码三.图片资源压缩四.开启gzip压缩先看一下优化配置之前的文件大小通过vue-cli3脚 ...
vue开源项目(各大插件，gitup源码)
vue开源项目(各大插件,gitup源码) 目录 UI组件开发框架实用库服务端辅助工具应用实例 Demo示例 UI组件 element★31142 - 饿了么出品的Vue2的web UI工具 ...
Vue创建项目、安装插件、引入全局的less变量
一.查看npm环境变量配置: ①使用快捷键windows+r打开任务管理器 ②输入cmd进入 ③检查是否安装,成功会返回版本号 node -v npm -v 安装node:https://nodejs ...
vue+webpack项目中px2rem的例子
引言: gitchat里有更详细的实战例子 Vue+Webpack 把 PX 转化成 REM 的实战例子本文重点: 项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+ ...
vue cli3 项目中解决跨域
最近项目中用到高德api,要做一个天气的模块. 做这个天气的模块,得知道用户所在得城市于是呢,我就在vue项目中获取了当前用户得ip,根据用户的ip定位了城市具体代码: vue页面: <te ...
Vue Cli3 项目打包优化
1.项目优化实现步骤: 清除生产环境中的console.log语句生成打包报告,根据报告优化项目第三方库启用CDN 路由懒加载首页内容定制 2.执行build 2.1 清除生产环境中的cons ...
vue cli3+项目使用postcss-px2rem或者postcss-plugin-px2rem适配
1. 使用postcss-px2rem或者postcss-plugin-px2rem讲vue项目的px全部转换未rem适配. 2. 下载: npm install --save postcss-px2 ...
vue cli3项目上限qq浏览器等出现空白兼容性错误解决方案
npm install es6-promise --save-dev npm install babel-polyfill --save-dev 都在main.js中引入 import 'babel- ...
可视化构建工具探索之Vue Cli3.0 阿里飞冰
Vue Cli3.0可视化构建工具--Vue UI 一.安装环境安装了最新的Vue CLI.打开Terminal,输入: npm install -g @vue/cli or yarn global ...

vue-cli3项目使用px2rem插件做自适应

第一步，安装插件

第二步，在根目录src中新建util目录下新建px2rem.js等比适配文件

第三步，在main.js中引入适配文件

第四步，到vue.config.js中配置插件

注意：安装了postcss-px2rem但是影响了ui组件的样式

1. postcss-px2rem不能忽略指定文件需要安装postcss-px2rem-exclude（安装前需要先卸载postcss-px2rem）

2. 在项目搭建的时候要选择配置文件的位置了

3. 要是选择独立配置文件的直接在根目录下 postcss.config.js内修改

vue-cli3项目使用px2rem插件做自适应相关推荐

最新文章

热门文章

vue-cli3项目使用px2rem插件做自适应

第一步，安装插件

第二步，在根目录src中新建util目录下新建px2rem.js等比适配文件

第三步，在main.js中引入适配文件

第四步，到vue.config.js中配置插件

注意：安装了postcss-px2rem但是影响了ui组件的样式

1. postcss-px2rem不能忽略指定文件 需要安装postcss-px2rem-exclude（安装前需要先卸载postcss-px2rem）

2. 在项目搭建的时候要选择配置文件的位置了

3. 要是选择独立配置文件的 直接在根目录下 postcss.config.js内修改

vue-cli3项目使用px2rem插件做自适应相关推荐

最新文章

热门文章

1. postcss-px2rem不能忽略指定文件需要安装postcss-px2rem-exclude（安装前需要先卸载postcss-px2rem）

3. 要是选择独立配置文件的直接在根目录下 postcss.config.js内修改