代码有更新,最好直接查看github:

https://github.com/finance-sh/adaptive

adaptivejs原理:


利用rem布局,根据公式  

html元素字体大小 = document根节点(html)宽度 * 100 / 设计图宽度  

计算html元素的font-size,使1rem等于100px,方便快速开发
开发时,一个div设计图宽度为89px,那么在css中我们可以这样书写:width:0.89rem;
如果是文字,我们也建议使用rem 对于iphone的retina高清显示屏,基本版本(adaptive.js)我们做了缩放处理,以达到最佳显示效果。 对于快速开发版本(adaptive-version2.js),viewport的width等于设备宽度,不会缩放

github:https://github.com/finance-sh/adaptive

百度理财的H5站我们都采用这种方式开发,比如:
页面: https://8.baidu.com/template/index/current.html

最大优点:

计算html元素的font-size,使1rem等于100px,方便快速开发  

adaptivejs利用rem解决移动端页面开发的自适应问题


页面模板初始化的时候不用设置viewport标签,由js生成。


我们在head标签的顶部引入js,按以下方法使用即可

 

使用方法:

在页面head写入以下代码,实时更新html的fontsize:
<script src="js/adaptive.js"></script> // 有缩放,精确还原设计图
<script src="js/adaptive-version2.js"></script> // 没有缩放,能快速开发的版本
<script>
window['adaptive'].desinWidth = 640;// 设计图宽度
window['adaptive'].baseFont = 18;// 没有缩放时的字体大小
window['adaptive'].maxWidth = 480;// 页面最大宽度 默认540
window['adaptive'].init();// 调用初始化方法
</script>

然后在css中设置相应样式即可:

.main-info {
height: 0.88rem;
padding-bottom: 0.24rem;
}
.fund-info {
position: relative;
font-weight: normal;
padding: 0.2rem 0;
padding-right: 1.7rem;
padding-left: 0.23rem;
font-size: 0.32rem;
line-height: 1;
}

注意:如果设计图宽度大于document的宽度,0.01rem将小于1px,故如果设计图是1px,在css中仍然用1px显示。

可用的全局变量:window.devicePixelRatioValue 当前页面设置的设备像素比

优化宽度问题

新增最大宽度,解决平板或手机横屏时体验不佳的问题

window['adaptive'].maxWidth = 480; // 设置最大宽度,默认540px

需要css配合使用,添加如下代码:

body {
max-width: 6.4rem; // 设计图宽度为640px时为6.4rem ,750时为7.5rem ,以此类推
margin: 0 auto;
}
body * {
max-width: 6.4rem; // 设计图宽度为640px时为6.4rem ,750时为7.5rem ,以此类推
}

基于rem的移动端自适应解决方案的更多相关文章

  1. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  2. 使用rem设计移动端自适应页面一(转载)

    1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...

  3. 基于vue-cli配置移动端自适应

    移动端自适应:手淘的 lib-flexible + rem 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: 1 npm i lib-flexible --save 引 ...

  4. 使用rem设计移动端自适应页面三(转载)

    使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应也是同个道理,不过是js更精确一点.使用媒体查询: html { font-size: 62.5% } @media only screen ...

  5. 使用rem配置PC端自适应大屏

    效果如下 使得大屏不论在什么宽高比例依然能展示全部数据 安装 npm install -S postcss-pxtorem rem配置思路 原先的rem函数是能解决大部分的问题的,如果展示不全,也可以 ...

  6. 基于rtmp的移动端推流解决方案

    因工作需要,及考虑成本因素,需要探索一套免费的移动端基于rtmp推流的直播解决方案,过程虽稍显曲折,但最终还是完成了目标.在这里将记录下来,以便日后查阅. 总体思路 移动端推流(RTMP) ---&g ...

  7. 基于REM的移动端响应式适配方案

    视口 在前一段时间,我曾经写过一篇关于viewport的文章.最近由于在接触移动端开发,对viewport有了新的理解.于是,打算重新写一篇文章,介绍移动端视口的相关概念. 关于这篇文章说到的所有知识 ...

  8. rem实现移动端自适应页面

    一.把px转换成rem方案 1.cssrem插件 2.css预处理器 3.rem-unit插件 4.px2rem插件 rem就是相对于根元素的font-size来做计算,设置好根结点字体大小,子节点用 ...

  9. 使用rem设计移动端自适应页面二(转载)

    由于日常需求以无线居多,所以可以在业务中做一些尝试,如 rem,刚接触这个特性的时候,曾经一度爱不释手,仿佛在无线开发的坎坷路上寻找到一条捷径.然而随着使用范围的扩大,慢慢的发现了一些使用 rem 带 ...

随机推荐

  1. PADS Layout 颜色设置

    一.板框.装配线.标注线配置: 二.个人爱好,我一般把Top pads设置成为浅绿色,Top Trace/vias/2D Line/Text/Cooper设置成为深绿色,Error设置成为黄色,而Bo ...

  2. .NET Core 1.0.1 升级汇总

    ASP.NET Core BUG fix: ASP.NET Routing Port fix for "Request not matching route with defaults&qu ...

  3. Linux学习日记-EF6的安装升级(三)

    在vs2013中使用EF是5的但是如果想使用 “来自数据库据的Code First” 这个生成模板就会发现 它会提示你EF的版本太低请升级 下面就是解决办法: 安装实体框架6 在工具菜单中,点击NuG ...

  4. React 其实比 MVVM 架构更加卡顿

    React 号称通过引入 Virtual DOM 带来了性能的提升,而其实 React 之所以需要 Virtual DOM,是因为它的架构下,state 的变更是全量的,然后触发 render 返回全 ...

  5. Rxjava Subjects

    上次提到调用observable的publish和connect方法后可以将一个Observable发出的对象实时传递到订阅在上的subscriber. 这个和Rxjava中Subject的概念十分相 ...

  6. c#操作MangoDB 之MangoDB CSharp Driver驱动详解

    序言 MangoDB CSharp Driver是c#操作mongodb的官方驱动. 官方Api文档:http://api.mongodb.org/csharp/2.2/html/R_Project_ ...

  7. Log4net入门(WCF篇)

    在上一篇Log4net入门(ASP.NET MVC 5篇)中,我们讲述了如何在ASP.NET MVC 5项目中使用log4net.在这一篇中,我们将讲述如何在WCF应用中使用log4net,为了讲述这 ...

  8. 计算机程序的思维逻辑 (29) - 剖析String

    上节介绍了单个字符的封装类Character,本节介绍字符串类.字符串操作大概是计算机程序中最常见的操作了,Java中表示字符串的类是String,本节就来详细介绍String. 字符串的基本使用是比 ...

  9. abstract与interface之房祖名张默版

    最近把java基础知识拿出来看看,看到abstract与interface的时候,觉得有点模糊,好像面试官也喜欢问这个问题.我在百度了查了好长时间,觉得讲算比较清楚的是那篇讲 Door,然后想要带个报 ...

  10. 跨域之Ajax

    提到Ajax,一般都会想到XMLHttpRequest对象,通过这个对象向服务器发送请求,可以实现页面无刷新而更新数据. 由于同源策略的限制,一般情况下,只能通过XMLHttpRequest对象向同源 ...