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. json序列化字符串后,配置枚举类型显示数值而不是名称

    2019独角兽企业重金招聘Python工程师标准>>> 经常有这么一个需求,实体类里面用到枚举常量,但序列化成json字符串时.默认并不是我想要的值,而是名称,如下 类 @Data ...

  2. 《WCF技术内幕》翻译3：第1部分_第1章_蓝月亮:普遍需求和普遍概念

    第一部分:WCF介绍    章节目录:    第1章:蓝月亮    第2章:面向服务    第3章:消息交换模式.拓扑和编排    第4章:WCF 101 第1章:蓝月亮    商业和市场对软件系统新 ...

  3. 原生JS设计轮播图

    一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...

  4. 【python】numpy库和matplotlib库学习笔记

    Numpy库 numpy:科学计算包,支持N维数组运算.处理大型矩阵.成熟的广播函数库.矢量运算.线性代数.傅里叶变换.随机数生成,并可与C++/Fortran语言无缝结合.树莓派Python v3默 ...

  5. W - Doom HDU - 5239 线段树 找取模的规律+求一个很大的数的平方对一个数取模的写法 特别的模数==2^63-2^31

    这个题目一开始感觉还是有点难的,这个模数这么大,根本就不知道怎么写,然后去搜了题解,知道了怎么去求当x很大的时候x的平方对一个数取模怎么样不会爆掉. 然后还顺便发现了一个规律就是当一个数更新一定次数之 ...

  6. (三)Bean生命周期

    1 Bean注册 应用启动实质是调用Spring容器启动方法扫描配置加载bean到Spring容器中.同时启动内置的Web容器的过程,具体分析如下: @SpringBootApplication注解在 ...

  7. Python 记录日志文件

    1.打印到控制台 # -*- coding: UTF-8 -*- import logging def logFileTest(): logging.debug('This is debug') lo ...

  8. 一篇文章彻底理解Redis持久化：RDB和AOF

    为什么需要持久化? Redis对数据的操作都是基于内存的,当遇到了进程退出.服务器宕机等意外情况,如果没有持久化机制,那么Redis中的数据将会丢失无法恢复.有了持久化机制,Redis在下次重启时可以 ...

  9. java知识点查漏补缺-- 2020512

    jvm: jdbc statement: JDBC statement中的PReparedStatement的占位符对应着即将与之对应当值,并且一个占位符只能对应一个值,如果能对应多个就会引起混淆.s ...

  10. UEFI Shell --常用命令解释

    UEFI Shell解释 UEFI Shell 是一个提供用户和UEFI系统之间的接口,进入UEFI Shell可以对计算机系统进行配置 命令解释: 单独的help就可以输出所有指令,不做特殊说明,内 ...