vue中的rem如何配置

目录 vue中rem的配置 1.在js中统一计算进行配置 2.借助px2rem 插件 vue-cil 3.0 px自动转换为rem适配移动端 1.下载postcss-pxtorem、lib-flexible 2.配置main.js 3.根路径配置postcss.config.js

vue中rem的配置

开发移动端，我们常常会因为把握不好尺度而觉得十分难受，因此可以用到rem+flex进行，那么vue中我们该如何如何配置呢？

1.在js中统一计算进行配置

新建src/utils/rem.js 代码如下：

const setFontSize = (minFontSize = 12, maxFontSize = 16) => {
? ? // 7.5根据设计稿的横向分辨率/100得来
? ? var deviceWidth = document.documentElement.clientWidth;
? ? // 获取浏览器宽度
? ? if(deviceWidth > 750) {
? ? ? ? // deviceWidth = 750;
? ? ? ? deviceWidth = 7.5 * 50;
? ? } else if (!deviceWidth) {
? ? ?? ? return;
? ? }
? ? const fontSize = Math.max(minFontSize, Math.min(12 * (deviceWidth / 320), maxFontSize));
? ? document.documentElement.style.fontSize = `${fontSize}px`;
? ? // 这样子的1rem=font-size的大小
? ? // 当然，万一你觉得这样子做的rem太小，可以推荐你第二种写法，相对更加简便，代码如下(注释的)
? ? ?// 获取浏览器宽度
? ? //if(deviceWidth > 750) {
? ? ? ? // deviceWidth = 750;
? ? ? ? //deviceWidth = 7.5 * 50;
? ? //}
? ? // document.documentElement.style.fontSize = `${deviceWidth / 7.5}px`;
? ? // 此时的fontSize大小为50px(375屏幕的时候)
? ? // 禁止双击放大
? ? document.documentElement.addEventListener('touchstart', function (event) {
? ? ? ? if (event.touches.length > 1) {
? ? ? ? ? ? event.preventDefault();
? ? ? ? }
? ? }, false);
? ? var lastTouchEnd = 0;
? ? document.documentElement.addEventListener('touchend', function (event) {
? ? ? ? var now = Date.now();
? ? ? ? if (now - lastTouchEnd <= 300) {
? ? ? ? ? ? event.preventDefault();
? ? ? ? }
? ? ? ? lastTouchEnd = now;
? ? }, false);
}
export default {
?? ?setFontSize ,
}

然后：在main.js中进行引入：

// 样式适应处理
import Rem from './utils/rem';
/* eslint-disable no-new */
new Vue({
? el: '#app',
? router,
? store,
? template: '<App/>',
? components: { App },
});
Rem.setFontSize();

当然！！！！！不能忘记设置默认大小

在asstes/gloabl.less中设置默认大小

//通用样式
body{
? font-family: "PingFangSC-Regular","PingFang SC","兰亭黑","Helvetica",sans-serif;
? color: @color-text;
? font-size: 14px;
? // font-sizt: 0.28rem; 375屏时
? background-color: @color-background;
}

记得要在main.js中引入

// 自定义样式
require('./assets/css/global.less');
/* eslint-disable no-new */
new Vue({
? el: '#app',
? router,
? store,
? template: '<App/>',
? components: { App },
});
Rem.setFontSize();

2.借助px2rem 插件

引入

npm install ?px2rem-loader ?lib-flexible --save?
? ? ? ? ? ? ? ? ? ? ? or
yarn add px2rem-loader lib-flexible --save

在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible.js'

在build下的 utils.js中，找到generateLoaders 方法，在这里添加。

const px2remLoader = {
? loader: 'px2rem-loader',
? options: {
? remUnit: 37.5
? }
}
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
?if (loader) {
? ?loaders.push({
? ?loader: loader + '-loader',
? ?options: Object.assign({}, loaderOptions, {
? ? ?sourceMap: options.sourceMap
? ?})
?})
}

重启项目，会发现自己设置的px被转为rem了

以上实现转换适用于：

（1）组件中编写的下的css

（2）从index.js或者main.js中import ‘…/…/static/css/reset.css’引入css

（3）在组件的中引入css

另外的情况不适用：

（1）组件中@import […/…/static/css/reset.css (可考虑上面（2）、（3）的形式引入)

（2）外部样式:

（3）元素内部样式：style=]height: 417px; width: 550px;]

vue-cil 3.0 px自动转换为rem适配移动端

1.下载postcss-pxtorem、lib-flexible

npm install lib-flexible --save-dev
npm install postcss-pxtorem --save-dev

2.配置main.js

import 'lib-flexible/flexible' // px自动转rem

3.根路径配置postcss.config.js

module.exports = {
? plugins: {
? ? autoprefixer: {},
? ? "postcss-pxtorem": {
? ? ? "rootValue": 75, // 设计稿宽度的1/10,
? ? ? "propList": ['*'],// 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
? ? }
? }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

查看更多关于vue中的rem如何配置的详细内容...