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

更新时间：2020年05月26日 11:08:48 作者：安静、认真听

这篇文章主要介绍了Vue移动端用淘宝弹性布局lib-flexible插件做适配的操作方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

淘宝弹性布局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
	   })
	  })
	 }

在这里插入图片描述

（请忽略我的编辑器背景，哈哈！）

项目展示

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

在这里插入图片描述

以375px的屏幕为例：

在这里插入图片描述

以411px的屏幕为例：

在这里插入图片描述

以768px的屏幕为例：

在这里插入图片描述

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

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

在这里插入图片描述

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

总结

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

您可能感兴趣的文章:

element中Steps步骤条和Tabs标签页关联的解决
这篇文章主要介绍了element中Steps步骤条和Tabs标签页关联的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
vuex的使用步骤
这篇文章主要介绍了vuex的使用步骤，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
vue踩坑记录之数组定义和赋值问题
这篇文章主要给大家介绍了关于vue踩坑记录之数组定义和赋值问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
快速掌握Vue Router使用方法
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向，就是我在页面上点击一个按钮需要跳转到对应的页面，这就是路由跳转
2023-01-01
使用Vue实现防篡改的水印
我们在平时上网的时候会看到有些图片是加水印的,一般水印往往是后端来做的,不过有些站点要保护的知识产权类型比较多,不光是图片,可能还有视频或者文字,所以我们水印的作用,就是给他做一个适当的限制,本文就给大家介绍一下如何使用Vue实现防篡改的水印
2023-08-08
vue中后端做Excel导出功能返回数据流前端的处理操作
这篇文章主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
详解Vue中AXIOS的封装
这篇文章主要为大家介绍了Vue中AXIOS的封装，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
vue深拷贝的三种实现方式示例详解
vue深拷贝的三种实现方式：1、通过递归方式实现深拷贝；2、JSON.parse(JSON.stringify(obj))；3、jQuery的extend方法实现深拷贝,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-11-11
vue实战中的一些实用小魔法汇总
这篇文章主要给大家介绍了关于vue实战中一些实用小魔法的相关资料,这些技巧和窍门,可以帮助你成为更好的Vue开发人员,需要的朋友可以参考下
2021-06-06
vue 如何删除数组中的某一条数据
这篇文章主要介绍了vue 如何删除数组中的某一条数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08