vue中px转rem教程

1：下载插件

安装px2rem-loader(devDependencies)

            npm install px2rem-loader -D

移动端适配解决npm包 "lib-flexible" (dependencies)

npm install lib-flexible -D
此时下载的插件其实可以用来，但是px2rem-loader这里只能仅限于css，并不能满足大多数开发需求，比如使用less,stylus,scss...这个时候就需要postcss--postcss-plugin-px2rem
npm install postcss-plugin-px2rem -D

-D 开发模式

-S 生产模式

2：在main.js中引入 lib-flexible

import 'lib-flexible' // 移动端适配 (目录: hello-world/src/main.js) 3：在项目文件夹下创建 "vue.config.js"文件里面写入

module.exports = {

chainWebpack: (config) => {

//

config.module

.rule('css')

.test(/\.css$/)

.oneOf('vue')

.resourceQuery(/\?vue/)

.use('px2rem')

.loader('px2rem-loader')

.options({

remUnit: 75

})

lintOnSave: true,

css: {

loaderOptions: {

postcss: {

plugins: [

require('postcss-plugin-px2rem')({

rootValue: 75, //换算基数，默认100 ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。

// unitPrecision: 5, //允许REM单位增长到的十进制数字。

//propWhiteList: [], //默认值是一个空数组，这意味着禁用白名单并启用所有属性。

// propBlackList: [], //黑名单

exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值

// selectorBlackList: [], //要忽略并保留为px的选择器

// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。

// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。

mediaQuery: false, //（布尔值）允许在媒体查询中转换px。

minPixelValue: 3 //设置要替换的最小像素值(3px会被转rem)。默认 0

}),

]

}

这样就好了，我的页面是75的如果是别的尺寸可以改

vue中px转rem教程相关推荐

Vue移动端项目中px转rem的两种方法
1)使用lib-flexible动态设置REM基准值(html标签的字体大小) 安装依赖 yarn add amfe-flexible// 或者npm i amfe-flexible 然后在main. ...
vue工程px转rem，postcss-px2rem插件的使用，移动端适配方案
vue工程实现px转rem 使用px单位在不同宽高比设备上显示样式比例有差异,rem是相对于根元素,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高.可以使用rem实现自适应. ...
Vue中引入看板娘教程
第一种方法本教程使用的Vue项目一.下载文件要玩看板娘,需要一些写好的资源文件,下载地址我提供我的百度网盘链接:百度网盘请输入提取码提取码:22l5 也可以扫下面这个二维码使用步骤 1. ...
vue中px 转 vh/vw
安装插件 npm install postcss-px-to-viewport --save -dev (直接在vscode 中安装插件 px to rem & rpx & vw (c ...
深究--CSS中px、rem与em的区别
前言:随着PC端的网页盛行,移动端作为重要的一部分,也是火热的发展,但是鉴于一些单位的使用,我们并不知道该怎样去使用,那么今天我们来看看常用的三种单位PX.rem与em. 目录: 一.PX 1.概念: ...
vue中devTools插件安装教程
vue-devTools 为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试 vue-devTo ...
react中px转rem（px2rem和px to rem rpx的使用）
.比如设计稿是750px,假设根元素字体大小设置为100px,则1rem = 100px;所以为了适应各种屏幕尺寸:一般设置根元素font-size 为屏幕宽度/UI设计图宽度 *100+'px', ...
vue项目中px转rem方法（pc端）
首先安装这两个插件 npm install postcss-px2rem-excludenpm install postcss-px2remnpm install px2rem-loader 安装好了 ...
VUE项目中px转rem
借鉴了网上的方法,自己在这里整理下.借鉴链接→传送门一.安装 lib-flexible npm install lib-flexible --save 二.安装px2rem-loader npm i ...

vue中px转rem教程

vue中px转rem教程相关推荐

最新文章

热门文章