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模拟实现Array的sort方法
Dec 11 Javascript
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
从源码角度来回答keep-alive组件的缓存原理
Jan 18 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
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php无限极分类实现的两种解决方法
2013/04/28 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP图片加水印实现方法
2016/05/06 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
2015/07/17 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
python迭代器的使用方法实例
2013/11/21 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python request post上传文件常见要点
2020/11/20 Python
英国床垫在线:Mattress Online
2016/12/07 全球购物
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
平面设计师工作职责范文
2013/12/03 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书