vue自适应pxtorem_vue移动端自适应适配

这是鼠年来的第一篇文章！

也是刚开始远程上班，强制度假后拿到的第一个任务是完成微信公众号手机端项目的开发！

话不多说，vue走起来！

一、安装lib-flexible插件

【lib-flexible】移动端弹性布局适配解决方案。用于设置rem的基准值，插件会自动对html根元素进行font-size的设定，默认会设置成屏幕宽度的十分之一。

打个比方：如果当前屏幕的宽度是1920px，它就会自动给html标签加上font-size: 192px的样式。这个时候，1rem也就等于192px。

1.安装：

npm i -S amfe-flexible

2.在index.html的头部加入手机端适配的meta代码(vue-cli3搭建的项目，该文件在public目录下)：

3.引入，以下方法二选一：

// 在main.js文件中直接引入(该文件在src目录下)

import 'amfe-flexible/index.js';

// 或者在index.html文件中加入此标签

二、安装postcss-pxtorem插件

【postcss-pxtorem】一款postcss插件。用于将单位转化为rem，代码中写入的px单位会根据设置好的基准值，以px大小除以基准值，自动转成rem显示在浏览器上。

打个比方：如果基准值为75(1个rem等于75px)，对元素设置宽度为750px，该插件就会自动将这个元素宽度转换成10rem。

1.安装：

npm install postcss-pxtorem --save-dev

2.(适用于vue-cli3)在根目录下找到vue.config.js，写入以下代码。若没有该文件请自行创建：

module.exports = {

css: {

loaderOptions: {

postcss: {

plugins: [

require('postcss-pxtorem')({ // 把px单位换算成rem单位

rootValue: 75, // 换算的基数(将宽度为750px的设计稿分成10等份，每份也就是75px，也就是1rem=75px)

propList: ['*'],

// selectorBlackList: [

// "van-",

// "weui"

// ],

// 以"van-"和"weui"开头的样式不会自动进行rem转换

})

]

}

}

}

};

执行完了上面的操作之后，你就可以毫不犹豫的写满px了，他们都会在编译时自动转换成rem单位！！！

重点在这，圈起来要考！

你觉得下面的网页哪个好看些？

图2一定是首选！

所以为了让做出来的页面在PC端也能友好一点，

就应该给页面设置一个最大宽度！

// main.js中写入

// REM适配：设置HTML里font-size的大小

function setRem () {

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

let htmlDom = document.getElementsByTagName('html')[0];

htmlDom.style.fontSize = (htmlWidth / 10) > 75 ? "75px" : htmlWidth / 10 + 'px'; // 设置1rem最大不超过75px

// htmlDom.style.fontSize = htmlWidth / 10 + 'px'; // 原先1rem等于屏幕宽度除以10

}

setRem(); // 初始化

window.onresize = function () {

setRem();

}

/* 对最大的父级容器设置样式，一般可能是App.vue文件中的#app */

#app {

max-width: 750px; /* 插件会自动解析成10rem */

margin: 0 auto;

}