vue移动端配置rem：

第一步：

首先在命令行下载插件： cnpm install lib-flexible postcss-plugin-px2rem --save-dev

第二步：

下载之后在main.js中引入：import ‘lib-flexible/flexible’;

第三步：

在项目根目录下创建vue.config.js文件

代码如下：

module.exports = {css: {loaderOptions: {postcss: {plugins: [require('postcss-plugin-px2rem')({rootValue:37.5, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为20px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。// unitPrecision: 5, //允许REM单位增长到的十进制数字。//propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。// propBlackList: [], //黑名单// exclude: /(page_pc)/i,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值exclude: /node_modules/i,// selectorBlackList: ['van-'], //要忽略并保留为px的选择器,我们一般不转换vantui中的大小// ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。 默认 0}),]}}},
}

vue移动端配置rem：相关推荐

Vue服务端配置示例
Vue服务端配置示例后端配置示例 #Apache <IfModule mod_rewrite.c>RewriteEngine OnRewriteBase /RewriteRule ^in ...
vue工程px转rem，postcss-px2rem插件的使用，移动端适配方案
vue工程实现px转rem 使用px单位在不同宽高比设备上显示样式比例有差异,rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.可以使用rem实现自适应. ...
vue 项目适配PC和移动端配置（两套代码）
vue 项目适配PC和移动端配置 (两套代码) 1.首页的配置: 首页用重定向的方式来进行适配的方案:` const redirectPath = /Android |webos | iphone i ...
vue项目转rem；H5配置rem；px转rem
H5可以配合vant组件库书写项目,和使用rem后vant组件样式变小了解决办法.(引入方式) 以下是配置rem步骤: 1.安装 flexible和 postcss-px2rem(命令行安装) lib ...
pc端移动端适配rem插件方式
vue-屏幕适配方案一,PC端适配开发PC端项目,通常会要求适应各种的屏幕尺寸,并且要求浏览器缩小页面等比例变化,因此就要求写出来的前端页面是能够自适应的. 利用webpack配置px2rem-l ...
vue移动端项目经验
如何实现横向滚动(兼容safari,微信,浏览器) 实现横向滚动需要以下几点: 1.设置width:2000px这种大的宽度 2.父级盒子要overflow-y:hidden;overflow-x:a ...
vue自适应（配置postcss-px2rem）
一.vue自适应(配置postcss-px2rem) 采用插件postcss-px2rem结合动态更新根节点的font-size 的js代码共同完成,实现在不同的屏幕等比例放大或缩小页面 1. pos ...
Vue 移动端、PC 端适配
Vue 移动端.PC 端适配可以使用 lib-flexible.amfe-flexible.postcss-pxtorem.postcss-px2rem 和 postcss-px-to-viewpor ...
Vue移动端项目---尚硅谷外卖
文章目录 Vue移动端项目--尚硅谷外卖项目目录结构介绍移动端适配头部和底部导航登录注册页面密码登录短信登录 Profile页面未登录已登录 Msite页面首页导航 ShopList ...

vue移动端配置rem：

vue移动端配置rem：相关推荐

最新文章

热门文章