移动端自适应之flexible

作用:flexible的作用是使页面可以适配不同移动终端

原理:在页面html标签上添加style = "font-size: 36px;"样式,设置字体大小是屏幕宽度的十分之一。然后页面布局使用rem单位。

VUE:在vue-cli中需要使用lib-flexible

在组建中引入即可

npm i lib-flexible --save

import 'lib-flexible'

注意:

需要在html页面中添加移动端兼容代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

当然,rem的计算是十分麻烦的,在vue中可使用  px 转 rem 工具:px2rem-loader

工具教程详见:http://hjingren.cn/2017/06/16/基于vue-cli配置移动端自适应/

钻研不易,转载请注明出处。。。。。。

移动端自适应之flexible的更多相关文章

  1. 移动端自适应:flexible.js可伸缩布局使用

    http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...

  2. 转载:移动端自适应:flexible.js可伸缩布局使用

    阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这 ...

  3. rem自适应布局-移动端自适应必备:flexible.js

    http://caibaojian.com/flexible-js.html

  4. 手淘的移动端适配方案flexible

    基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应 安装 flexible npm install lib-flexible --save 引入 flexible ...

  5. 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  6. webstorm下的sass自动编译和移动端自适应实践

    1.安装Ruby 2.安装sass 3.webstorm配置file watcher 4.移动端自适应 1.安装Ruby 安装Ruby,有多种方式,打开官网下载 因为,使用的是window选择Ruby ...

  7. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  8. 基于vue-cli配置移动端自适应

    移动端自适应:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引 ...

  9. vue+vue-cli+淘宝lib-flexible做移动端自适应

    总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...

随机推荐

  1. PAT 甲级 1052 Linked List Sorting (25 分)(数组模拟链表,没注意到不一定所有节点都在链表里)

    1052 Linked List Sorting (25 分)   A linked list consists of a series of structures, which are not ne ...

  2. CRM-项目记录

    硬件篇 阵列R5 3个盘才能做R5阵列,还需要单独的一个SSD硬盘做系统盘 软件篇 跨域问题 SPRINGMVC 配置了跨域,也使用了跨域注解,但是依然不能解决问题 最后通过直接修改TOMCAT的WE ...

  3. 第三方框架MBProgressHUD-----实现各种提示框

    程序运行显示如下 : 点击按钮实现对应的提示框: 这里只截取了其中一张图,有兴趣的可以自己运行程序,查看其他的几种提示框哟!!! 第三方框架MBProgressHUD的下载地址:https://git ...

  4. Redis高级功能 - 慢查询日志

    转自 https://segmentfault.com/a/1190000009915519

  5. pycharm操作Django基础部分

    原文地址:https://www.cnblogs.com/feixuelove1009/p/5823135.html

  6. 侯捷C++内存管理(一)

    1.Overview 2.内存分配的每一层面 3.四个层面的基本用法 1).对比一下: 4.基本构件之一newdelete expression(上) ——>new和operator new.m ...

  7. 静态链表过程演示及代码实现(A - B) U (B - A)

    静态链表说明 使用数组来实现链式存储结构,目的是方便在不设指针类型的高级程序设计语言中使用链式结构 c语言定义数据结构 #define MAX_SIZE 1000 // 所有的类型都统一定义为Elem ...

  8. sas(Serial Attached SCSI)技术详解

    1.什么是SAS 即串行SCSI技术,是一种磁盘连接技术,它综合了并行SCSI和串行连接技术(FC,SSA,IEEE1394)的优势,以串行通讯协议为协议基础架构,采用SCSI-3扩展指令集,并兼容S ...

  9. 国产龙芯服务器源码安装PostgreSQL数据库的方法

    1. 公司最近有一些国产化项目的需求, 要求在国产CPU的服务器上面安装pg数据库等. 2.. 但是差查了下中标麒麟的官网,在龙芯MIPS的操作系统包源里面仅有 postgreSQL 9.2 版本的r ...

  10. ThreadLocal的坑--ThreadLocal跨线程传递问题

    1.父子线程间的传递问题 ThreadLocal的子类InheritableThreadLocal其实已经帮我们处理好了,通过这个组件可以实现父子线程之间的数据传递,在子线程中能够父线程中的Threa ...