vue cli3项目使用rem和vw实现自适应的方法
vue cli3项目使用rem和vw实现自适应的两种方法前言之前我写过两篇cli2项目自适应配置的文章,不过现在遇到的vue项目大多是cli3项目所以觉得有必要总结一下cli3项目自适应方法,在网上找了一篇不错的文章安装配置vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多,将一些默认配置进行了更好更严密,让开发变得更高效的封装。一. 使用postcss-px2rem自适应1
vue cli3项目使用rem和vw实现自适应的两种方法
前言
之前我写过两篇cli2项目自适应配置的文章,不过现在遇到的vue项目大多是cli3项目所以觉得有必要总结一下cli3项目自适应方法,
在网上找了一篇不错的文章
安装配置
vue-cli3 构建的项目相较于vue-cli2 构建的项目精简了许多,将一些默认配置进行了更好更严密,让开发变得更高效的封装。
一. 使用postcss-px2rem自适应
1. 安装 flexible和 postcss-px2rem(npm安装方式 flexible适用于移动端自适用)
npm install lib-flexible --save
npm i postcss-px2rem --sav
flexible会为页面根据屏幕自动添加标签,动态控制initial-scale,maximum-scale,minimum-scale等属性的值。同时flexible.js文件中封装这refreshRem方法,与页面监听事件绑定,可以动态设置根元素的font-size.
postcss-px2rem会将px转换为rem,rem单位用于适配不同宽度的屏幕,根据标签的font-size值来计算出结果,1rem=html标签的font-size值,相当于单位转换器.
注意:如果lib-flexible插件安装不上,可以去下载lib-flexible.js文件,下载地址,在html文件中手动标签引用.
<meta name="viewport" content="width=device-width,initial-scale=1.0">
2, 引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
注意事项(important): 由于flexible会动态给页面header中添加标签,所以务必请把目录 public/index.html 中的这个标签删除!!!
我看有的文章还有一步修改flexible.js文件的步骤(通过观察方法中的代码发现,refreshRem方法绑定在页面监听事件上,大致的逻辑是页面发生变化时,根据页面宽度和设备dpr动态设置根元素font-size值,达到页面自适应的目的)
把540改成width就是这个目的.如果不改动在width / dpr > 540的情况下,根元素的font-size是固定值,不能达到自适应目的.
如果是通过手动下载flexible.js文件,不用修改此文件.(我发现如果是PC端自适用推荐手动下载,如果是移动端推荐使用npm,npm安装的js文件中,font-size设置把dpr因素也考虑进去了)
手动下载flexible.js相关代码:
设置flexible.js的宽度根据屏幕大小自动适配, 修改flexible.js 文件,(全局搜索 flexible.js
修改后代码:
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
3, 配置postcss-px2rem
px2rem的配置放在vue-cli3 项目中vue.config.js中(如果找不到此文件,可能你是一个新构建的项目,需要手动在项目根目录创建vue.config.js)
module.exports = {
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
require('postcss-px2rem')({
remUnit: 37.5
})
]
}
}
},
}
PS:remUnit这个配置项的数值是多少呢??? 通常我们是根据设计图来定这个值,原因很简单,便于开发。假如设计图给的宽度是750,我们通常就会把remUnit设置为75,这样我们写样式时,可以直接按照设计图标注的宽高来1:1还原开发。
那为什么在这里写成了37.5呢???
之所以设为37.5,是为了引用像mint-ui这样的第三方UI框架,因为第三方框架没有兼容px2rem ,将remUnit的值设置为设计图宽度(这里为750px)75的一半,即可以1:1还原mint-ui的组件,否则会样式会有变化,例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时,也将值改为设计图的一半。
二. 使用vw自适应
1.安装需要的插件(由于cli3的一些配置有过修改,npm 的库也相应多了)
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano postcss-import postcss-url --S
2.在根路径下的postcss.config.js配置如下
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
"postcss-aspect-ratio-mini": {},
"postcss-write-svg": {
utf8: false
},
"postcss-cssnext": {},
"postcss-px-to-viewport": {
viewportWidth: 750, // (Number) The width of the viewport.
viewportHeight: 1334, // (Number) The height of the viewport.
unitPrecision: 3, // (Number) The decimal numbers to allow the REM units to grow to.
viewportUnit: 'vw', // (String) Expected units.
selectorBlackList: ['.ignore', '.hairlines'], // (Array) The selectors to ignore and leave as px.
minPixelValue: 1, // (Number) Set the minimum pixel value to replace.
mediaQuery: false // (Boolean) Allow px to be converted in media queries.
},
"postcss-viewport-units":{},
"cssnano": {
preset: "advanced",
autoprefixer: false,
"postcss-zindex": false
}
}
}
3.启动npm run serve会发现报 Cannot load preset “advanced”. Please check your configuration for errors and try again错
这是就需要在安装一个cssnano-preset-advanced插件
npm i cssnano-preset-advanced --save-dev
4.再次启动,所有的css的px都变为vw单位
5.引入兼容性方案
①引入viewport-units-buggyfill.js和viewport-units-buggyfill.hacks.js两个js https://github.com/rodneyrehm/viewport-units-buggyfill
②调用
<script>
window.onload = function () {
window.viewportUnitsBuggyfill.init({
hacks: window.viewportUnitsBuggyfillHacks
});
}
</script>
cli3的vw配置到此也就结束了。如果在项目中仍然需要使用px可以加class为.ignore或.hairlines(.hairlines一般用于设置border-width:0.5px的元素中) 还有更多内容 还是看原文《如何在Vue项目中使用vw实现移动端适配》。
更多推荐
所有评论(0)