Vue 适配移动端使用 postcss-pxtorem lib-flexible 插件转px为vw rem

vue项目使用Vant框架Rem适配（postcss-pxtorem、lib-flexible ）的安装使用

1.安装：

使用的是vue-cli+webpack，通过npm来安装的

npm i postcss-px2rem lib-flexible --save-dev
或者
yarn add postcss-px2rem lib-flexible

2.引入lib-flexible

在main.js中引入lib-flexible

//导入rem 的 js,动态的设置了不同屏幕的html根元素的 font-sizeimport "lib-flexible"

3.在plublic中index.html删除meta标签：

通过meta标签，设置设备宽度以及缩放比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
flexible会根据屏幕页面自动添加<meta name="viewport"> 标签，动态控制initial-scale,maximun-scale,minimun-scale等属性的值

4.安装postcss-pxtorem

一款 postcss 插件，用于将单位转化为 rem 只是用来把单位转化为rem 没别的了

npm install postcss-pxtorem -D

5.配置vue.config.js：

module.exports=function(){devServer:{port:3000,open:true},//rem配置css: {loaderOptions: {css:{},postcss: {plugins: [require('postcss-px2rem')({//这里是配置项，详见官方文档remUint:37.5,propList: ['*'], //设置px转换成rem的属性值，*表示所有属性的px转换为rem}),]}}}
}

如果没有配置vue.config.js，可以在build/vue-loader.config.js配置：

const precss = require('precss')
const pxtorem = require('postcss-px2rem')
module.exports = {......postcss:[precss(),pxtorem({remUnit: 37.5, //设计尺寸propList: ['*']//自动转化rem})],
}

6.当配置完之后，只需要重启下服务，就自动转化为rem了

npm run dev 或者 npm run serve

Vue 适配移动端使用 postcss-pxtorem lib-flexible 插件转px为vw rem相关推荐

vue适配PC端屏幕自适应
vue适配PC端屏幕自适应 1.下载postcss-px2rem和px2rem-loader npm i postcss-px2rem px2rem-loader 2.src目录下新建utils文件夹 ...
vue适配双端浮标(悬浮球)拖拽
适配双端浮标拖拽最近写到一个需求是悬浮球拖动,看了很多网上的案例,要么移动端很流畅那么PC端就很卡,要么双端(ps:双端是指移动端和PC端)都很卡.于是自己就在网上百度改造了一款双端基本上很流畅的就 ...
vue适配移动端布局
上代码 // 下载依赖 npm i lib-flexible npm i px2rem-loader // 如果报错显示找不到模块现下载面的这个依赖 npm i postcss-px2rem // 找 ...
vue适配移动端px自动转化为rem
1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...
Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...
js页面自适应屏幕大小_Web页面适配移动端方案研究
源宝导读:由于我们ERP目前大都是在在PC上面运行,大家现在关注移动端比较少,谈到移动端适配时,可能都有些生疏也可能比较好奇.以前做过一些移动端的little项目,那么借助这次分享的机会,和大家一起讨 ...
vue实现移动端图片预览
vue实现移动端图片预览 1.安装插件 2.main引入 3.使用注意扩展通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能. 1.安装插件 npm install ...
vue的PC端和移动端分辨率适配
使用lib-flexible和px2rem实现移动端和PC端界面适配注释:lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题.现已不被推荐(因为目前比较主流的适配方案是使用vw和v ...
Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...

Vue 适配移动端使用 postcss-pxtorem lib-flexible 插件转px为vw rem

vue项目使用Vant框架Rem适配（postcss-pxtorem、lib-flexible ）的安装使用

1.安装：

2.引入lib-flexible

3.在plublic中index.html删除meta标签：

4.安装postcss-pxtorem

5.配置vue.config.js：

如果没有配置vue.config.js，可以在build/vue-loader.config.js配置：

6.当配置完之后，只需要重启下服务，就自动转化为rem了

Vue 适配移动端使用 postcss-pxtorem lib-flexible 插件转px为vw rem相关推荐

最新文章

热门文章

Vue 适配移动端 使用 postcss-pxtorem lib-flexible 插件 转px为vw rem

vue项目使用Vant框架Rem适配（postcss-pxtorem、lib-flexible ）的安装使用

1.安装：

2.引入lib-flexible

3.在plublic中index.html删除meta标签：

4.安装postcss-pxtorem

5.配置vue.config.js：

如果没有配置vue.config.js，可以在build/vue-loader.config.js配置：

6.当配置完之后，只需要重启下服务，就自动转化为rem了

Vue 适配移动端 使用 postcss-pxtorem lib-flexible 插件 转px为vw rem相关推荐

最新文章

热门文章

Vue 适配移动端使用 postcss-pxtorem lib-flexible 插件转px为vw rem

Vue 适配移动端使用 postcss-pxtorem lib-flexible 插件转px为vw rem相关推荐