移动端自适应之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. "Could not resolve host: mirrorlist.centos.org; Unknown error"解决方法

    这两天学习历程可谓历尽坎坷,昨天在vSphere Client中安装完CentOS系统后,今天尝试在系统中安装mysql数据库. 由于刚接触Linux,所以对于一些常用指令和操作并不熟悉,也是一边百度 ...

  2. fbx模型在OSG中渲染

    int main() { osg::ref_ptr<osgViewer::Viewer> viewer1 = new osgViewer::Viewer; osg::ref_ptr< ...

  3. 40 Flutter仿京东商城项目签名验证原理、签名验证算法

    加群452892873 下载对应40课文件,运行方法,建好项目,直接替换lib目录 pubspec.yaml crypto: ^ SignServices.dart import 'dart:conv ...

  4. 页面被iframe与无刷新更换url方法

    页面被iframe问题解决方法 if (window.top.location !== window.self.location) { const data = JSON.stringify({ if ...

  5. Mac 裁剪mp3

    系统自带的QuickTime Player

  6. 查询 ip占用导致ip不通的 问题 查IP对应的mac地址

    IP冲突,  同一个IP配到了多余1台的机器上 ,导致IP 不通的情况,此时需要查询 都有哪台机器配置了这个IP,用 arping 命令, 具体命令 类似于 ping ,直接 arping + 目标地 ...

  7. MySQL的注入总结

    0x01 MySQL 5.0以上和MySQL 5.0以下版本的区别 MySQL5.0以上版本存在一个叫information_schema的数据库,它存储着数据库的所有信息,其中保存着关于MySQL服 ...

  8. Opencv官方例程简介

    opencv sample文件夹例程 No1. adaptiveskindetector.cpp 利用HSV空间的色调信息的皮肤检测,背景不能有太多与肤色相似的颜色.效果不是特别好. No2. bag ...

  9. utf8 unicode 编码互转

    static function utf8_to_unicode($c) { switch(strlen($c)) { case 1: return ord($c); case 2: $n = (ord ...

  10. 导航current背景

    ========================================简单一点的 var locationUrl = location.href.toLowerCase(); //导航cur ...