1. <script src="static/js/adaptive.js"></script>
  2. <script type="text/javascript">
  3. // 设计图宽度
  4. window['adaptive'].desinWidth = 750;
  5. // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem' 750的设计图一般设置为28,640的设计图一般设置为24
  6. window['adaptive'].baseFont = 28;
  7. // 显示最大宽度 可选
  8. window['adaptive'].maxWidth = 750;
  9. // window['adaptive'].scaleType = 1;
  10. // rem值改变后执行方法 可选
  11. // window['adaptive'].setRemCallback = function () {
  12. // alert(1)
  13. // }
  14. // scaleType 1:iphone andriod下viewport均无缩放 2:iphone下viewport有缩放,andriod没有 3:iphone andriod下viewport均有缩放; 默认值为1
  15. // window['adaptive'].scaleType = 1
  16. // 初始化
  17. window['adaptive'].init();
  18. </script>

这是那个js文件。直接复制到你们指定的js文件夹中就了

  1. /*
  2. // 设计图宽度
  3. window['adaptive'].desinWidth = 750;
  4. // body 字体大小 会将body字体大小设置为 baseFont / 100 + 'rem' 750的设计图一般设置为28,640的设计图一般设置为24
  5. window['adaptive'].baseFont = 28;
  6. // 显示最大宽度 可选
  7. window['adaptive'].maxWidth = 750;
  8. // window['adaptive'].scaleType = 1;
  9. // rem值改变后执行方法 可选
  10. // window['adaptive'].setRemCallback = function () {
  11. // alert(1)
  12. // }
  13. // scaleType 1:iphone andriod下viewport均无缩放 2:iphone下viewport有缩放,andriod没有 3:iphone andriod下viewport均有缩放; 默认值为1
  14. // window['adaptive'].scaleType = 1
  15. // 初始化
  16. window['adaptive'].init();
  17. * */
  18.  
  19. var adaptive = {};
  20. (function (win, lib) {
  21. var doc = win.document;
  22. var docEl = doc.documentElement;
  23. // 设备像素比
  24. var devicePixelRatio = win.devicePixelRatio;
  25. // 我们设置的布局视口与理想视口的像素比
  26. var dpr = 1;
  27. // viewport缩放值
  28. var scale = 1;
  29. // 设置viewport
  30. function setViewport() {
  31. // 判断IOS
  32. var isIPhone = /iphone/gi.test(win.navigator.appVersion);
  33. if (lib.scaleType === 2 && isIPhone || lib.scaleType === 3) {
  34. dpr = devicePixelRatio;
  35. }
  36. // window对象上增加一个属性,提供对外的布局视口与理想视口的值
  37. win.devicePixelRatioValue = dpr;
  38. // viewport缩放值,布局视口缩放后刚好显示成理想视口的宽度,页面就不会过长或过短了
  39. scale = 1 / dpr;
  40. // 获取已有的viewport
  41. var hasMetaEl = doc.querySelector('meta[name="viewport"]');
  42. var metaStr = 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';
  43. if (dpr === 1) {
  44. metaStr = 'width=device-width, '.concat(metaStr);
  45. }
  46. if (!isIPhone && dpr !== 1) {
  47. metaStr = metaStr.concat(', target-densitydpi=device-dpi');
  48. }
  49. // 如果有,改变之
  50. if (hasMetaEl) {
  51. hasMetaEl.setAttribute('content', metaStr);
  52. }
  53. // 如果没有,添加之
  54. else {
  55. var metaEl = doc.createElement('meta');
  56. metaEl.setAttribute('name', 'viewport');
  57. metaEl.setAttribute('content', metaStr);
  58.  
  59. if (docEl.firstElementChild) {
  60. docEl.firstElementChild.appendChild(metaEl);
  61. }
  62. else {
  63. var containDiv = doc.createElement('div');
  64. containDiv.appendChild(metaEl);
  65. docEl.appendChild(containDiv);
  66. }
  67. }
  68. }
  69.  
  70. var newBase = 100;
  71. lib.errDpr = 1;
  72.  
  73. function setRem() {
  74. // 布局视口
  75. // var layoutView = docEl.clientWidth; 也可以 获取布局视口的宽度
  76. var layoutView;
  77. if (lib.maxWidth) {
  78. layoutView = Math.min(docEl.getBoundingClientRect().width, lib.maxWidth * dpr);
  79. }
  80. else {
  81. layoutView = docEl.getBoundingClientRect().width;
  82. }
  83. // 为了计算方便,我们规定 1rem === 100px设计图像素,我们切图的时候就能快速转换
  84. // 有人问,为什么不让1rem === 1px设计像素呢?
  85. // 设计图一般是640或者750px
  86. // 布局视口一般是320到1440
  87. // 计算一个值,使layout的总宽度为 (desinWidth/100) rem
  88. // 那么有计算公式:layoutView / newBase = desinWidth / 100
  89. // newBase = 100 * layoutView / desinWidth
  90. // newBase = 介于50到200之间
  91. // 如果 1rem === 1px 设计像素,newBase就介于0.5到2之间,由于很多浏览器有最小12px限制,这个时候就不能自适应了
  92. newBase = 100 * layoutView / lib.desinWidth * (lib.errDpr || 1);
  93. docEl.style.fontSize = newBase + 'px';
  94. // rem基准值改变后,手动reflow一下,避免旋转手机后页面自适应问题
  95. doc.body&&(doc.body.style.fontSize = lib.baseFont / 100 + 'rem');
  96. // 重新设置rem后的回调方法
  97. lib.setRemCallback&&lib.setRemCallback();
  98. lib.newBase = newBase;
  99. }
  100. var tid;
  101. lib.desinWidth = 750;
  102. lib.baseFont = 28;
  103. // 局部刷新的时候部分chrome版本字体过大的问题
  104. lib.reflow = function() {
  105. docEl.clientWidth;
  106. };
  107. // 检查安卓下rem值是否显示正确
  108. function checkRem() {
  109. if (/android/ig.test(win.navigator.appVersion)) {
  110. var hideDiv = document.createElement('p');
  111. hideDiv.style.height = '1px';
  112. hideDiv.style.width = '2.5rem';
  113. hideDiv.style.visibility = 'hidden';
  114. document.body.appendChild(hideDiv);
  115. var now = hideDiv.offsetWidth;
  116. var right = lib.newBase * 2.5;
  117. if (Math.abs(right / now - 1) > 0.05) {
  118. lib.errDpr = right / now;
  119. setRem();
  120. }
  121. document.body.removeChild(hideDiv);
  122. }
  123. }
  124. lib.init = function () {
  125. // resize的时候重新设置rem基准值
  126. // 触发orientationchange 事件时也会触发resize,故不需要再添加此事件了
  127. win.addEventListener('resize', function () {
  128. clearTimeout(tid);
  129. tid = setTimeout(setRem, 300);
  130. }, false);
  131. // 浏览器缓存中读取时也需要重新设置rem基准值
  132. win.addEventListener('pageshow', function (e) {
  133. if (e.persisted) {
  134. clearTimeout(tid);
  135. tid = setTimeout(setRem, 300);
  136. }
  137. }, false);
  138. // 设置body上的字体大小
  139. if (doc.readyState === 'complete') {
  140. doc.body.style.fontSize = lib.baseFont / 100 + 'rem';
  141. checkRem();
  142. }
  143. else {
  144. doc.addEventListener('DOMContentLoaded', function (e) {
  145. doc.body.style.fontSize = lib.baseFont / 100 + 'rem';
  146. checkRem();
  147. }, false);
  148. }
  149. setViewport();
  150. // 设置rem值
  151. setRem();
  152. // html节点设置布局视口与理想视口的像素比
  153. docEl.setAttribute('data-dpr', dpr);
  154. };
  155. // 有些html元素只能以px为单位,所以需要提供一个接口,把rem单位换算成px
  156. lib.remToPx = function (remValue) {
  157. return remValue * newBase;
  158. };
  159. })(window, adaptive);
  160. if (typeof module != 'undefined' && module.exports) {
  161. module.exports = adaptive;
  162. } else if (typeof define == 'function' && define.amd) {
  163. define(function() {
  164. return adaptive;
  165. });
  166. } else {
  167. window.adaptive = adaptive;
  168. }

适配手机端rpx像素的更多相关文章

  1. CSS3及JS简单实现选项卡效果(适配手机端和pc端)

    想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...

  2. iPhone X 适配手机端 H5 页面通用解决方案

    一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...

  3. 适配手机端之 rem

    (function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...

  4. 用Desmos玩极坐标[适配手机端]

    前言 数学给人的印象一直就是算算算,今天我们不算,我们只玩. 必备条件 ①."呆萌"软件--Desmos 网址:https://www.desmos.com/calculator, ...

  5. 手机端rem如何适配_rem详解及使用方法

    什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...

  6. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

  7. 关于手机端适配的问题(rem,页面缩放)

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  8. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  9. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

随机推荐

  1. c++ 11 线程池---完全使用c++ 11新特性

    前言: 目前网上的c++线程池资源多是使用老版本或者使用系统接口实现,使用c++ 11新特性的不多,最近研究了一下,实现一个简单版本,可实现任意任意参数函数的调用以及获得返回值. 0 前置知识 首先介 ...

  2. angular1使用echarts2绘制图标

    一.绘制柱状图:直接上代码 1.首先下载echarts-all文件(这里就不赘述了),然后是创建一个bar.js及内容如下: bar.js内容: var app = require("../ ...

  3. 明火烟雾目标检测项目部署(YoloV5+Flask)

    明火烟雾目标检测项目部署 目录 明火烟雾目标检测项目部署 1. 拉取Docker PyToch镜像 2. 配置项目环境 2.1 更换软件源 2.2 下载vim 2.3 解决vim中文乱码问题 3. 运 ...

  4. [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑

    [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑 目录 [源码解析] TensorFlow 分布式环境(2)---Master 静态逻辑 1. 总述 2. 接口 2.1 ...

  5. 初探 Elasticsearch,学习笔记第一讲

          1. ES 基础   1.1 ES定义   ES=elaticsearch简写, Elasticsearch是一个开源的高扩展的分布式全文检索引擎,它可以近乎实时的存储.检索数据:本身扩展 ...

  6. 编程篇——Java学习路线

    1.java基础编程2.Java多线程编程(并发)3.Java设计模式(重构)4.Java调试技术(Java虚拟机)5.Java常用框架学习篇6.Java开发之web篇

  7. 火狐firebug&firepath插件安装

    火狐浏览器下掉了firebug和firepath插件,用户即使下载了火狐55以下的版本,也无法查找到这两个插件,以下方法可以解决哦 第1步:下载火狐55以内版本安装包,安装时迅速设置禁止自动更新版本, ...

  8. Java基础—构造方法

    1.构造方法概述 构造方法是一种特殊的方法,用来创建对象,当我们不定义时,系统会默认给出一个无参构造方法:一旦我们定义了任意的构造方法,系统就不会给出默认的无参构造方法 格式如下: public ca ...

  9. windows 2008 R2磁盘清理

    记录一次由于磁盘空间满,IIS使前端程序报500的事故 由于导出Api部署在IIS服务器,在程序调用导出Api会报500 发现windows服务器C盘已满 下面处理过程 只需复制cleanmgr.ex ...

  10. 如何看待malloc产生内存碎片

    上代码直接研究: int main() { int *heap_d; int *heap_e; int *heap_f; heap_d = (int *)malloc(10); heap_e = (i ...