移动端自适应之flexible
移动端自适应之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的更多相关文章
- 移动端自适应:flexible.js可伸缩布局使用
http://caibaojian.com/flexible-js.html 阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现 ...
- 转载:移动端自适应:flexible.js可伸缩布局使用
阿里团队开源的一个库.flexible.js,主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题. 实现方法: 通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这 ...
- rem自适应布局-移动端自适应必备:flexible.js
http://caibaojian.com/flexible-js.html
- 手淘的移动端适配方案flexible
基于 vue-cli 配置手淘的 lib-flexible + rem,实现移动端自适应 安装 flexible npm install lib-flexible --save 引入 flexible ...
- 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)
flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...
- webstorm下的sass自动编译和移动端自适应实践
1.安装Ruby 2.安装sass 3.webstorm配置file watcher 4.移动端自适应 1.安装Ruby 安装Ruby,有多种方式,打开官网下载 因为,使用的是window选择Ruby ...
- 【转载】rem自适应布局-移动端自适应必备
原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...
- 基于vue-cli配置移动端自适应
移动端自适应:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引 ...
- vue+vue-cli+淘宝lib-flexible做移动端自适应
总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...
随机推荐
- hadoop格式化
1.hadoop启动时,namenode没有启动起来 1.删除 namenode产生的临时文件 tmp 2.删除datanode的数据,否则也不行.(如果datanode有数据,请自己备份) ./bi ...
- Could not find conda environment: tensorflow | anaconda激活环境
问题:在使用Anaconda Prompt时activate tensorflow时出现Could not find conda environment: tensorflow. 解答: 因为大家在使 ...
- 关于Selenium remote模式分布式执行UI自动化测试必定面临的性能问题
1.大部分自动化测试人员都是在本地执行UI自动化测试,也就是代码和浏览器必须在同一台机器上,这样的的缺陷很多,无法多任务并发执行UI自动化测试用例,效率极低 2.正是如此,Selenium 的remo ...
- migrate设置
migrate配置 进入项目manage所在的目录中执行如下命令,否则会报错:no such table: django_session 进入cmd 输入盘符比如:E: 切换目录 cd E:\prog ...
- Tools - 关于Network
Tcpdump homepage - tcpdump wiki - tcpdump Wireshark homepage - wireshark wiki - wireshark Wireshark基 ...
- 【转载】【游戏开发】在Lua中实现面向对象特性——模拟类、继承、多态
[游戏开发]在Lua中实现面向对象特性——模拟类.继承.多态 阅读目录 一.简介 二.前提知识 三.Lua中实现类.继承.多态 四.总结 回到顶部 一.简介 Lua是一门非常强大.非常灵活的脚本语 ...
- Centos7安装gitlab11 学习笔记之基础概念、部署安装、权限管理、issue管理
一.基础介绍 1.简介 一个基于GIT的源码托管解决方案 基于rubyonrails开发 集成了nginx postgreSQL redis sidekiq等组件 2.安装要求 2g内存以上,有点占内 ...
- JS 报错(intermediate value)(...) is not a function
- java连接zookeeper实现zookeeper的基本操作
Java服务端连接Zookeeper,进行节点信息的获取,管理…,整理成一个基本工具, 添加依赖: <dependency> <groupId>org.apache.zooke ...
- java读写cookie中文乱码解决方法
1.写入的时候: public boolean addCookie( HttpServletRequest req, HttpServletResponse resp){ //创建 Cookie co ...