*前言:
- 适配解释:所谓移动端适配就是能够在不同手机尺寸中达到同样的样式效果,避免在大屏幕手机中,字体太小,小屏幕手机中,字体太大等等问题。
- 实现原理:通常使用的是px单位,但适配中是用rem单位来做的,因为rem单位是
font size of the root element (根元素的字体大小)
,意思是每个浏览器有不同的默认根节元素的字体大小,假如你的浏览器的默认根元素字体大小是12px
,那么1rem = 12px
。假如你的按钮大小宽高分别是1rem * 1rem
,换算过来就是12px * 12x
,那假如我把根元素的默认字体大小改成16px
呢,那我的按钮大小宽高岂不应该是16px * 16px
? 所以原理就是这样,就是根据不同屏幕宽高,改变它的根元素的字体大小,然后其他地方都该成rem单位
,但是呢rem
单位我们用的很不习惯,所以又要想办法把rem
单位改成我们熟悉的px
单位。
步骤:
1、首先下载两个辅助插件
npm i lib-flexible -S
npm i postcss-px2rem -S
- lib-flexible插件是用来改变
html根节点
的font-size
大小的 - postcss-px2rem插件是用来把我们css中写的
px
单位自动换算成rem
2、引入lib-flexible插件
打开你的main.js文件,添加import 'lib-flexible'
import 'lib-flexible'
3、修改lib-flexible源码,此步可以省略
解释: 因为lib-flexible
这个插件主要是用来做手机自适应的,所以一部手机它的屏幕是有用上限的,你的手机屏幕不可能无限大把,所以当手机屏幕尺寸大于540px
的时候,源码当中就把html根元素的字体大小写死为54px
了,但是如何我们要做响应式pc端
的话,屏幕最大肯定不止540px
这么点点。所以如果只是想单纯想做手机端的话,此步骤可忽略。
打开node_modules
文件夹中,去找lib-flexible
插件文件夹下的flexible.js
文件,如下:
ctrl+F查找function refreshRem
function refreshRem
4、配置postcss-px2rem
在你的项目找到vue.config.js
文件,如果找不到就自己新建一个,因为在vue-cli3以上创建的项目中,这个文件是个可选文件。找到后(新建好后)加入如下代码:
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
}