详解vue.js移动端配置flexible.js及注意事项

前言

最近在用vue做移动端项目，网上找了一些移动端适配的方案，个人觉得手淘团队flexible.js还是比较容易上手，在这里做下总结。

主体

flexible.js适配方案采用rem布局，根据屏幕分辨率大小不同，调整根元素html的font-size，从而达到每个元素宽高自动变化，适配不同屏幕

1.安装lib-flexible.js

npm install lib-flexible --save

1.在项目入口文件main.js中引入lib-flexible

import 'lib-flexible/flexible'

通过要以上两步，就完成了在vue项目使用lib-flexible来解决移动端适配了。

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

这里需要注意几点：

1.检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。

2.因为html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的最大宽度是10rem。

3.如果每次从设计稿量出来的尺寸都手动去计算一下rem，就会导致我们效率比较慢，还有可能会计算错误，所以我们可以使用px2rem-loader自动将css中的px转成rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

1.安装px2rem-loader

npm install px2rem-loader --save-dev

1.配置px2rem-loader

首先找到 build/utils.js文件，在utils.js中添加如下配置

找到generateLoaders方法，在函数里如下配置

1.px2rem 用法

安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。

•直接写px，编译后会直接转化成rem —- 除开下面两种情况，其他长度用这个

•在px后面添加/*no*/，不会转化px，会原样输出。 —- 一般border需用这个

•在px后面添加/*px*/,会根据dpr的不同，生成三套代码。—- 一般字体需用这个

下面是本人写的实例代码，可以参考

原始代码：

.box{
  width: 150px;
  font-size: 28px; /*px*/
  border: 1px solid #ddd; /*no*/
}

编译后生成代码：

.box{
  width: 2rem;
  border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
  font-size: 14px;
}
[data-dpr="2"] .selector {
  font-size: 28px;
}
[data-dpr="3"] .selector {
  font-size: 42px;
}

这样基本配置就完成了，重启项目就可以使用lib-flexible+rem编写移动端页面了

后缀

交个朋友，可以一起进阶前端学习

找到我： GitHub

总结

以上所述是小编给大家介绍的vue.js移动端配置flexible.js及注意事项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐

    移动端自适应flexible.js的使用方法(不用三大框架，仅写一个单html页面使用）推荐

    第一步: 下载 flexible.js,代码如下,可以复制过去用 ;(function(win, lib) { var doc = win.document var docEl = doc.documentElement var metaEl = doc.querySelector('meta[name="viewport"]') var flexibleEl = doc.querySelector('meta[name="flexible"]') var dpr

  • js中flexible.js实现淘宝弹性布局方案

    js中flexible.js实现淘宝弹性布局方案

    本文的内容就是介绍淘宝弹性布局方案lib-flexible实践,分享给大家供大家参考,具体内容如下 1. 页面需求 这是要做的页面效果(不要对设计置评,这不是开发人员决定的): 这是尺寸标注图(750*1334): 然后美工在750*1334的设计稿之上,按我的要求提供以下素材的切图: 包括两个下载按钮的背景图片,logo,底部梯形的渐变背景和body部分的mobile 背景图.注意这些图片都是在750*1334的设计稿里面切出来的,所以尺寸都是设计稿里的原始尺寸,比如android.png:

  • vue.js移动端app实战1：初始配置详解

    vue.js移动端app实战1：初始配置详解

    本系列将会用vue.js2制作一个移动端的webapp单页面,页面不多,大概在7,8个左右,不过麻雀虽小,五脏俱全,常用的效果如轮播图,下拉刷新,上拉加载,图片懒加载都会用到.css方面也会有一些描述,像不同分辨率的适配,flex布局以及scss来编写mixin来处理2x,3x图等. 初始工作: 通过vue-cli安装webpack模板后,会自动生成一大堆文件,通常我们只关心src/目录下的东西.  个人习惯在src下新建一个base目录,用来存放通用的css及js,比如样式重置css,一切js

  • 手淘flexible.js框架使用和源代码讲解小结

    手淘框架是一个用来适配移动端的js框架,下面我们来讲解一下如何使用手淘的这套框架. 基本概念 1.视窗viewport 可能写过移动端的朋友就知道viewport是什么意思. 如果你不知道的话,可以简单理解成:浏览器的可视区窗口.可能在PC端,viewport就是浏览器窗口的宽度高度.但在移动端设备上却就有点复杂,具体的详细介绍我就不介绍啦!可以自行百度... 2.物理像素 物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.正是这些设备像

  • 详解vue.js移动端配置flexible.js及注意事项

    前言 最近在用vue做移动端项目,网上找了一些移动端适配的方案,个人觉得手淘团队flexible.js还是比较容易上手,在这里做下总结. 主体 flexible.js适配方案采用rem布局,根据屏幕分辨率大小不同,调整根元素html的font-size,从而达到每个元素宽高自动变化,适配不同屏幕 1.安装lib-flexible.js npm install lib-flexible --save 1.在项目入口文件main.js中引入lib-flexible import 'lib-flexi

  • 一文详解Vue 的双端 diff 算法

    一文详解Vue 的双端 diff 算法

    目录 前言 diff 算法 简单 diff 双端 diff 总结 前言 Vue 和 React 都是基于 vdom 的前端框架,组件渲染会返回 vdom,渲染器再把 vdom 通过增删改的 api 同步到 dom. 当再次渲染时,会产生新的 vdom,渲染器会对比两棵 vdom 树,对有差异的部分通过增删改的 api 更新到 dom. 这里对比两棵 vdom 树,找到有差异的部分的算法,就叫做 diff 算法. diff 算法 我们知道,两棵树做 diff,复杂度是 O(n^3) 的,因为每个节

  • 一文详解如何在IDEA中配置Node.js

    目录 一.下载Node.js 二.安装Node.js 三.配置Node.js 四.测试Node.js 总结 一.下载Node.js 官网下载链接:Node.js  或者点击这里下载 点击下图红色标注区域,即可下载msi文件 二.安装Node.js 打开msi文件 一路点击“Next”(建议自定义文件安装路径) 安装完成 三.配置Node.js 打开IDEA 如下图,进入设置 在语言和框架中找到Node.js 选择节点解释器(在安装的Node.js里找到相应的node.exe) 此时IDEA会自动

  • 详解vue中移动端自适应方案

    方案1: 直接引入js  (自己 写的动态改变fontsize的js) function htRem() { var ww = document.documentElement.clientWidth; if (ww > 750) { ww = 750; } document.documentElement.style.fontSize = ww / 7.5 + "px"; } htRem(); window.onresize = function() { htRem(); };

  • 详解vue 在移动端体验上的优化解决方案

    详解vue 在移动端体验上的优化解决方案

    去年年底自己搭了一个vue在移动端的开发框架,感觉体验不是很好.上个星期又要做移动端的项目了.所以我花了两天时间对之前的那个开发框架做了以下优化 自定义vuex-plugins-loading 路由切换动画 + keep alive 动态管理缓存组件 better-scroll与vue的最佳实践(better-scroll的vue化) 自定义指令(vue-finger:包括点击,长按,双击,拖拽移动,多点触控,滑动,旋转,缩放手势) 移动端适配方案 如何分情况处理页面置顶 路由懒加载 自定义 v

  • 详解vue配置请求多个服务端解决方案

    一.解决方案 1.1 描述接口context-path 后端的两个接口服务请求前缀,如下: 前缀1: /bryant 前缀2: / 1.2 vue.config.js配置 devServer: { port: 8005, proxy: { // 第一台服务器配置 '/bryant': { target: 'http://localhost:8081, ws: true, changeOrigin: true, pathRewrite: { '^/bryant': '/bryant' } }, /

  • 详解 vue.js用法和特性

    详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • 详解Vue.js中.native修饰符

    修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

  • 详解Vue.js 响应接口

    Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click

  • 详解Vue.js 可拖放文本框组件的使用

    详解Vue.js 可拖放文本框组件的使用

    可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件 注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=

随机推荐