码迷,mamicode.com
首页 > 移动开发 > 详细

移动端rem+dpr布局

时间:2017-04-20 15:17:32      阅读:240      评论:0      收藏:0      [点我收藏+]

标签:flex   bug   css   xib   mic   文件下载   bcd   默认   debug   

最近在做一个移动端的项目,在摸索中发现了一种移动端的布局和字体自适应方法,在当下来说应该是最好的了!主要是针对跟我一样还在摸索当中的同学们!主要也为了记录一下我活着过。。。

最主要的是字体使用px,配合用data-dpr属性来区分不同dpr下的的大小。其他使用rem作为单位

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}

淘宝lib-flexible Github传送门     

https://github.com/amfe/lib-flexible

使用方法

lib-flexible库的使用方法非常的简单,只需要在Web页面的<head></head>中添加对应的flexible_css.js,flexible.js文件:

第一种方法是将文件下载到你的项目中,然后通过相对路径添加:

<script src="build/flexible_css.debug.js"></script>
<script src="build/flexible.debug.js"></script>

或者直接加载阿里CDN的文件:

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

 

移动端rem+dpr布局

标签:flex   bug   css   xib   mic   文件下载   bcd   默认   debug   

原文地址:http://www.cnblogs.com/binli/p/6735291.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!