vue 实现 rem 布局的 或者 vw 布局的方法

vue 实现 rem 布局的 或者 vw 布局的方法

一、实现 rem 布局

移动端

<meta  name="viewport"  content="width=device-width, initial-scale=1, maximum-scale=1"/>

方法一、在 index.html 或者 main.js 中添加以下代码：

const thtmlfontsize = () => {  let devicewidth =    document.documentelement.clientwidth || document.body.clientwidth  if (devicewidth >= 750) {    devicewidth = 750  }  if (devicewidth <= 320) {    devicewidth = 320  }  document.documentelement.style.fontsize = `${devicewidth / 7.5}px`}window.onresize = 吴克羣 吴克群thtmlfontsizethtmlfontsize()

之后，在写 css 时，只要将 px 单位替换成 rem，这里设置的比例是 100px=1rem,例如，宽度为 100px 时，可以直接写成 1rem。

方法二、cli3 使用 lib-flexible 和 将 px 自动转换为 rem 插件

1、安装插件
npm install lib-flexible –save

npm install px2rem-loader –save-dev
或选择
npm install postcss-plugin-px2rem –save-dev（推荐）
或选择
npm install postcss-px2rem –save-dev

2、配置插件
在入口文件 main.js 中引入 lib-flexible

import 'lib-flexible/flexible'

3、三种插件的 cli3 配置：
在 vue.config.js 中

//px2rem-loader配置module.exports = {  chainwebpack: config => {    config.module      .rule('css')      .test(/\.css$/)      .oneof('vue')      .resourcequery(/\?vue/)      .u('px2rem')      .loader('px2rem-loader')      .options({        remunit: 75      })  }}

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

//postcss-px2rem配置module.exports = {  css: {    loaderoptions: {      postcss: {        plugins: [          require('postcss-px2rem')({            remunit: 37.5 //设计图除10之后的一半，兼容第三方库px转成rem样式变小的情况          })        ]      }    }  }}

二、cli3 实现 vw 布局

vw 是基于 viewport 视窗的长度单位

vw：是 viewport’s width 的简写,1vw 等于 window.innerwidth 的 1%
nd的过去式vh：和 vw 类似，是 viewport’s height 的简写，1vh 等于 window.innerheihgt 的 1%
vmin：vmin 的值是当前 vw 和 vh 中较小的值
vmax：vmax 的值是当前 vw 和 vh 中较大的值

1、安装插件(可以直接转换 px 为 vw)
npm i postcss-px-to-viewport -d
2、在 vue.config.js 中

module.exports = {  css: {    loaderoptions: {      postcss: {        plugins: [          require('postcss-px-to-viewport')({            viewportwidth: 750, //视口宽度，这里设置为跟设计稿宽度一致；            viewportheight: 1334, //视口高度，随便设置一个就可以；            unitprecision: 3, //转换后值的精度句子的表达效果，3表示保留3位小数；            viewportunit: 'vw', //转换成什么视口单位，这里当然是vw；            lectorblacklist: ['.ignore', '.hairlines'], //是一个选择符数组，对应声明中的像素单位不会转换；            minpixelvalue: 1, //最小像素值，大于等于这个值才会转换；            m铁的氧化物ediaquery: fal //是否转换媒体查询中的像素。          })        ]      }    }  }}