

flexible的使用
1、先安装 postcss-plugin-px2rem 和 lib-flexible
npm i --save postcss-plugin-px2rem
npm i --save lib-flexible
2、在main.js引入
import 'lib-flexible/flexible'
3、在vue.config.js配置
module.exports = {
css: {
loaderOptions: {
stylus: {
'resolve url': true,
'import': [
'./src/theme'
]
},
postcss: {
plugins: [
require('postcss-plugin-px2rem')({
rootValue: 37.5, //换算基数,rootValue的值应该设置为你当前开发下屏幕的宽度/10(例:屏幕宽度为375,则设置为37.5),之后就可以在css直接使用px,插件会自动转换成相应的rem。
// exclude: /(node_module)/, //默认false,可以(reg)利用正则表达式排除某些文件夹的方法,例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem,请把此属性设为默认值
// selectorBlackList: [], //要忽略并保留为px的选择器
// ignoreIdentifier: false, //(boolean/string)忽略单个属性的方法,启用ignoreidentifier后,replace将自动设置为true。
// replace: true, // (布尔值)替换包含REM的规则,而不是添加回退。
mediaQuery: true, //(布尔值)允许在媒体查询中转换px。
minPixelValue: 1 //设置要替换的最小像素值(3px会被转rem)。 默认 0
}),
]
}
}
}
}
接下来可以在你的项目里使用px,打开浏览器调试工具看看是否转换成rem单位。下面我们来看一个案例。
这里我把文字的font-size设置为30px,

然后它帮我转成了0.8rem,原因是rootValue配置的37.5,那么30px/37.5=0.8rem,所以你看你页面控制台就是0.8rem。换句话说就是1rem=37.6px,0.8*37.5不就等于30了。

但是你看这个实际的font-size怎么就是43.2呢?那就要了解一下rem这个单位了(推荐rem介绍:https://www.cnblogs.com/liu-di/p/11254583.html)

所以,看上图,根节点的font-size是54px,那我们我就可以说项目里面现在这个宽度1rem等于54px,然后你现在个人博客这四个字是0.8rem,那么就是0.8*54=43.2,所以你看你实际宽度就是43.2px。
至于根节点这个font-size的属性是会变的,就是因为安装的flexible这个包,当屏幕大于540的时候它就一直是font-size:54px,当小于540宽度的时候,font-size就是根据屏幕宽度/10,然后在移动端就会随着你的根节点font-size变化去实现自适应。
关于前端网页自适应方案其他推荐
1、个人建议先写PC端再写移动端,PC端正常写就可以了,但注意以下几点可能会有很好的效果。
- 能不设置宽高的尽量不设置,让内容自己撑开。
- 少用float,如果用了记得清除浮动。
- 尽量用flex布局(父盒子设置flex-wrap:wrap,子盒子尽量设置实际宽,少用用百分比)。
- 屏幕宽度大于540建议用媒体查询,屏幕宽度小于540建议用rem(关于rem)。
2、lib-flexible版本
- 0.3.2版本:当屏幕宽度小于540进行等比例缩放,当屏幕宽度大于540将不进行缩放,并以540为基准(个人建议使用),有特殊情况也可以下载flexible.js文件到项目,修改flexible.js文件源码中屏幕宽度540的限定。
- 2.0版本:根据屏幕宽度全程等比例缩放网页
3、原生静态页面
- 将flexible.js下载至本地并引入项目
- 推荐vscode插件px to rem & rpx (cssrem):以自己设置基准将px计算为rem,在设置->插件->Root Font Size设置自己当前屏幕宽度/10的值(例:当前屏幕宽度为1440,则设置144)