注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

开源框架 flexible.js  

2015-03-31 08:35:53|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
前面博客提到关于rem小数点的问题里面就使用了这个框架,这篇博客详细的给大家做一个详细介绍。

一:下载框架——>点击下载 访问密码 59e8

二:引入框架
开源框架 flexible.js - 梦幻雪冰 - 梦幻雪冰
 注意:下面这句代码可以省略不写, flexible.js 会进行动态生成。欢迎学习交流——梦幻雪冰

<meta name="viewport" content="width=device-width, user-scalable=no">

三:字体大小设置
字体的设置,仍旧使用px作为单位,并配合用data-dpr属性来区分不同dpr下的的大小。关于这个dpr可以查看设备像素比(devicePixelRatio)博客。
实例代码:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script src="flexible.js" charset="utf-8" type="text/javascript"></script>
<style>
div {
font-size: 12px;
/*设备像素比为1的时候,字体大小为24px;*/
}
[data-dpr="2"] div {
font-size: 24px;
/*设备像素比为2的时候,字体大小为24px;*/
}
[data-dpr="3"] div {
font-size: 36px;
/*设备像素比为3的时候,字体大小为36px;*/
}
</style>
</head>
<body>
<div class="wrap">梦幻雪冰、独行冰海</div>
</body>
</html>

查看结果:
1、设备像素比等于1的时候
开源框架 flexible.js - 梦幻雪冰 - 梦幻雪冰
2、设备像素比等于3的时候
开源框架 flexible.js - 梦幻雪冰 - 梦幻雪冰
 
四:一些常用的APIs

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>梦幻雪冰</title>
<link rel="stylesheet" href="reset.css">
<script src="flexible.js" charset="utf-8" type="text/javascript"></script>
</head>
<body>
<script>
// 获取当前页面的dpr值
console.log(lib.flexible.dpr);

// 获取当前页面的rem基准值
console.log(lib.flexible.rem);

// 把rem转换为px
// 参数为字符串
console.log(lib.flexible.rem2px(["2rem"]));
// 参数为数值
console.log(lib.flexible.rem2px([2]));

// 把px转换为rem
// 参数为字符串
console.log(lib.flexible.px2rem(["60px"]));
// 参数为数值
console.log(lib.flexible.px2rem([60]));

// 刷新当前页面的rem基准值
lib.flexible.refreshRem()
</script>
</body>
</html>


欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
  评论这张
 
阅读(636)| 评论(2)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017