Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法


Posted in Javascript onMay 26, 2020

淘宝弹性布局lib-flexible

lib-flexible并不单独使用,而是搭配px2rem-loader一起做适配方案,目的是自动将css中的px转换成rem,在项目中还是按照设计稿写上对应的固定像素(px)就行。

移动端适配的具体步骤

第一步:安装插件 lib-flexible

npm i lib-flexible --save-dev

第二步:安装px2rem loader

npm install px2rem-loader --save-dev

第三步:在main.js中引入lib-flexible

import 'lib-flexible/flexible'

第四步:在build中的util.js文件中配置px2rem-loader

先找到build文件里面的utils.js文件,找到cssLoaders函数,把px2rem-loade(下面代码)添加到函数中。

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
   remUnit: 75 // remUnit为转换rem的基础 设计稿单位/等分数 = remUnit
  }
 }

然后再找到cssLoaders中的generateLoaders的函数,添加上px2rem-loader。

function generateLoaders (loader, loaderOptions) {
  
	const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

	 if (loader) {
	  loaders.push({
	   loader: loader + '-loader',
	   options: Object.assign({}, loaderOptions, {
	    sourceMap: options.sourceMap
	   })
	  })
	 }

Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

(请忽略我的编辑器背景,哈哈!)

项目展示

代码中头像宽高样式为130px,项目是以750px的设计稿为例,

Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

以375px的屏幕为例:

Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

以411px的屏幕为例:

Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

以768px的屏幕为例:

Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

总而言之,当项目使用来lib-flexible插件后,元素的宽度会根据手机的分辨率大小自动调节,来实现移动端屏幕的适配!

不过目前此插件已停止维护,但是不耽误使用,搜索lib-flexible时,github上出来的事amfe-flexible,

Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法

下面有amfe-flexible的git地址,大家没事也可以学习学习,虽然lib-flexible很好用但是我们也要与时俱进啊! amfe-flexible.

总结

到此这篇关于Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法的文章就介绍到这了,更多相关vue移动端适配插件lib-flexible内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS取request值以及自动执行使用示例
Feb 24 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
微信小程序实现弹框效果
May 26 #Javascript
微信小程序自定义弹出层效果
May 26 #Javascript
详解JSON.stringify()的5个秘密特性
May 26 #Javascript
微信小程序实现简单文字跑马灯
May 26 #Javascript
微信小程序实现带放大效果的轮播图
May 26 #Javascript
vue实现图片上传功能
May 28 #Javascript
小程序实现图片移动缩放效果
May 26 #Javascript
You might like
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
分享纯手写漂亮的表单验证
2015/11/19 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
JS中数组重排序方法
2016/11/11 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python中的迭代器漫谈
2015/02/03 Python
Django中使用group_by的方法
2015/05/26 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
python实现朴素贝叶斯算法
2018/11/19 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
Django URL参数Template反向解析
2020/11/24 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
C语言编程练习
2012/04/02 面试题
护理专业毕业生自荐信范文
2014/01/05 职场文书
2015年护士节活动总结
2015/02/10 职场文书
2015年文员个人工作总结
2015/04/09 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
公司转让协议书
2016/03/19 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫