Flexibl.js

为我们做了一项工作，媒体查询工作，节约了许多操作

举个例子，移动端的页面设计稿是750px，我们自己换算rem单位，比如我想把屏幕划分为15等份，我就750/15=50，然后用所有的像素单位除以50，换算得到的就是rem单位。

但是css不能计算，所以我们使用可编译的less或者scss进行定义变量和计算。Hbuilder x的less编译环境需要安装，在node.js的环境下安装各种编译插件

刚接触rem和移动端制作，有些吃力，最常用的flex弹性盒子和rem布局，流式布局貌似不能满足某些需求，并且ipad可以不考虑在移动端内。

Flexibl.js把屏幕划分为10等份，设计稿在750px的情况下，那么所有像素就得除75来换算rem

Flexible 应用的更多相关文章

  1. CSS3伸缩盒Flexible Box

    这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...

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

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

  3. 使用Flexible实现手淘H5页面的终端适配

    拿到设计师给的设计图之后,剩下的事情是前端开发人员的事了.而手淘经过多年的摸索和实战,总结了一套移动端适配的方案--flexible方案. 这种方案具体在实际开发中如何使用,暂时先卖个关子,在继续详细 ...

  4. 使用Flexible适配移动端html页面 - demo记录

    前段时间看了大神的博客文章[使用Flexible实现手淘H5页面的终端适配](地址:http://www.w3cplus.com/mobile/lib-flexible-for-html5-layou ...

  5. 移动端H5页面的最佳终端适配之Flexible

    lib-flexible是什么? lib-flexible是一个制作H5适配的开源库,可以点击这里下载相关文件,获取需要的JavaScript和CSS文件. 当然你可以直接使用阿里CDN: <s ...

  6. SSAS Cube 维度成员关系Rigid 和 Flexible

    维度成员关系指示成员关系是否随时间而更改.  值为 Rigid 和 Flexible,前者表示成员之间的关系不随时间而更改,后者表示成员之间的关系随时间而更改. 默认值为 Flexible.  指定适 ...

  7. flexible.js

    关于rem小数点 flexible.js http://blog.163.com/hongshaoguoguo@126/blog/static/180469812015219101346170/ ht ...

  8. 使用Flexible实现手淘H5页面的终端适配【转】

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论—— ...

  9. 使用Flexible 实现手淘H5 页面的终端适配学习

    Amfe阿里无线前端团队双11技术连载之际,一个实战案例来展示多终端适配. Device metrics 1.0 mdpi 2.0 xhdpi 3.0xxhdpi(iphone 6 plus) 手淘h ...

  10. 07.20 html5的适配flexible

    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"> ...

随机推荐

  1. 解决layui动态追加的点击事件不起作用问题

    2019独角兽企业重金招聘Python工程师标准>>> //不起作用 $('#demo').on('click', function() { layer.msg('响应点击事件'); ...

  2. P1458 顺序的分数 Ordered Fractions（有技巧的枚举）+C++类封装=精简代码

    题目描述 输入一个自然数N,对于一个最简分数a/b(分子和分母互质的分数),满足1<=b<=N,0<=a/b<=1,请找出所有满足条件的分数. 这有一个例子,当N=5时,所有解 ...

  3. 无向图求割点（找桥）tarjan

    本博客参考了李煜东的<算法竞赛进阶指南>,大家要是觉得这篇文章写的不错请大家支持正版.豆瓣图书 我在之前的博客中讲解了搜索序时间戳,这次我们讲讲追溯值的概念. 追溯值: 设subtree( ...

  4. 疯子的算法总结10--最小生成树Kruscal

    按照权值排序可得,就有如下顺序: 1. 1-2 1 2. 1-4 2 3. 1-5 2 4. 2-5 3 5. 2-3 4 6. 4-5 4 每次选取最小边泉,判断是否同属一个集合,如果不属于同一集合 ...

  5. SVN 部署（基于 Linux）

    1.通过 yum 命令安装 svnserve,命令如下: # 此命令会全自动安装svn服务器相关服务和依赖,安装完成会自动停止命令运行 yum -y install subversion # 若需查看 ...

  6. 虚拟化云计算平台Proxmox VE

    1.虚拟化技术介绍 1.1.OpenVZ 简介 OpenVZ 是开源软件, 是基于Linux平台的操作系统级服务器虚拟化解决方案,它是基于Linux内核和作业系统的操作系统级虚拟化技术. OpenVZ ...

  7. 2） 接口规范 原生django接口、单查群查 postman工具 CBV源码解析

    内容了解 """ .接口:什么是接口.restful接口规范 .CBV生命周期源码 - 基于restful规范下的CBV接口 .请求组件.解析组件.响应组件 .序列化组件 ...

  8. C. Game with Chips(陷阱暴力题)

    \(为什么说这是个陷阱呢??\) \(因为不管你脑洞多大,数学多好,都发现会束手无策\) \(每移动一次不知道往哪个方向,不知道先访问哪个点,同时要记录所有点的坐标,记录每个点是否访问过目标点.... ...

  9. 补 第三场多校杭电 费用流 K Subsequence

    K Subsequence 这个题目是这个人想吃东西,但是他每次吃的都是他的美味值都必须不递减,可以吃k次,问这个最大的美味值是多少. 这个是一个比较明显的费用流,建图也很好建,但是呢,这个题目卡sp ...

  10. C# 数据操作系列 - 0. 序言

    0. 前言 在上一个系列中,我们初步浏览了一下C#的基础知识.这句话的意思就是C#基础知识系列完结了,撒花.当然,并不是因为C#已经讲完了.正是因为我们轻轻地叩开了那扇门,才能看到门后面那瑰丽的世界. ...