这段时间做了几个手机版的项目,因为没有用框架,所以用rem来做适应,下面就分享一下

//第一种是比较简单的代码

(function(win) {
  resizeRoot();
  function resizeRoot() {
    var wWidth = document.documentElement.clientWidth;
    if (wWidth > 640) wWidth = 640;
    else if (wWidth < 320) wWidth = 320;
    document.documentElement.style.fontSize = wWidth * 0.0625 + 'px'
  }
  window.onresize = resizeRoot
})(window);

//第二种

!function (window) {
  /* 设计图文档宽度 */
  var docWidth = 750;
  var doc = window.document,
    docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var recalc = (function refreshRem () {
    var clientWidth = docEl.getBoundingClientRect().width;
    /* 8.55:小于320px不再缩小,11.2:大于420px不再放大 */
    docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px';
    return refreshRem;
  })();
  /* 添加倍屏标识,安卓为1 */
  docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1);

  if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
  /* 添加IOS标识 */
    doc.documentElement.classList.add('ios');
  /* IOS8以上给html添加hairline样式,以便特殊处理 */
  if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
    doc.documentElement.classList.add('hairline');
  }
  if (!doc.addEventListener) return;
    window.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  }(window);

//引用这第二的就比较容易计算,设计图尺寸以px / 100 = 实际rem 【例如 100px = 1rem ,24px=0.24rem】

手机端rem适应的更多相关文章

  1. 手机端rem简单配置相关

    手机端rem简单配置相关 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 ...

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

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

  3. (淘宝无限适配)手机端rem布局详解(转载非原创)

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

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

    作为一个前端开发人员,我们的任务是将UI设计师的图稿运用计算机语言呈现在用户面前.而现在的设备大小尺寸不一,近年来智能手机的普及更是让网页的用户大部分来源与手机,所以让不同大小的移动端屏幕都能较好的还 ...

  5. 手机端rem 用法

    !function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange" ...

  6. (淘宝无限适配)手机端rem布局详解

    从网易与淘宝的font-size思考前端设计稿与工作流 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问 ...

  7. 移动端适配(手机端rem布局详解)

    1. 问题的引出 如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10 ...

  8. 手机端rem无限适配

    参考文档: http://blog.csdn.net/xwqqq/article/details/54862279 https://github.com/amfe/lib-flexible/tree/ ...

  9. 手机端rem自适应布局实例

    首先要书写核心js代码,控制住页面的初始大小:我是以750px(即iPhone6)的标准,设置font-size:100px:<script>        (function (doc, ...

随机推荐

  1. jQuery基础知识总结二

     * DOM操作 *1 基本操作 * html() - 等价于innerHTML属性 * text() - 等价于textContent属性 * val() - 等价于value属性 * attr() ...

  2. 開源sources

    學了c++已經快有半年光景,感覺在停留在syntax上已經不能感到有所滿足.一下是一些開源資料,難度極高,姑且當作是個人的一個小小wishing list,當作to-do list 般去執行吧. ht ...

  3. Oracle 安装报错 [INS-06101] IP address of localhost could not be determined 解决方法[转]

    --安装Oracle 11gR2,报错:[INS-06101] IP address of localhost could not be determined--------------------- ...

  4. vbs系统监控

    vbs CPU 内存 硬盘监控脚本 On Error Resume Next Dim dwTotalMem, dwAvailMem, totalvolumn, freespace Const szRo ...

  5. oracle 表空间 表权限 用户

    启动数据库命令分为三个阶段: 1.查看所有用户:select * from dba_user;select * from all_users;select * from user_users;2.查看 ...

  6. 【可视化】Echarts3坐标系倒映

    目标: 用echarts实现在一个echarts图表中包含上下两个坐标系 横轴合并在一块.有一种上下对称水映的视觉效果 要点提示:grid 是一个数组 包含两个grid xAxis,yAxis也都是数 ...

  7. When Startup Disk is Full

    参考自What To Do When Your Mac's Startup Disk is Almost Full Delet——Empty Trash

  8. Bootstrap中的datetimepicker用法,只看一眼就全懂了

    本文实例为大家分享了bootstrap datetimepicker日期插件的简单使用,供大家参考,具体内容如下 首先在文件头部引入必要的文件: 1 2 <link rel="styl ...

  9. Servlet的执行流程、生命周期

    下面这幅图的Request和Response的箭头方向反了,应该是客户端发出请求,然后web服务器返回响应. servlet生命周期阶段包括初始化.加载.实例化.服务和销毁.  编写Servlet的d ...

  10. [js高手之路]设计模式系列课程-委托模式实战微博发布功能

    在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...