js实现适配不同的屏幕大小


Posted in Javascript onApril 10, 2017

话不多说,请看代码:

// 通过js适配不同的屏幕大小
(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      // 根据设备的比例调整初始font-size大小
      if(clientWidth>640) clientWidth = 640;
      docEl.style.fontSize = 50 * (clientWidth / 320) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
2014 HTML5/CSS3热门动画特效TOP10
Dec 07 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
详解vue axios二次封装
Jul 22 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
angular6开发steps步骤条组件
Jul 04 Javascript
JS闭包可被利用的常见场景小结
Apr 09 #Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 #jQuery
作为老司机使用 React 总结的 11 个经验教训
Apr 08 #Javascript
详解angular element()方法使用
Apr 08 #Javascript
angularjs的select使用及默认选中设置
Apr 08 #Javascript
JS排序之冒泡排序详解
Apr 08 #Javascript
JS排序之快速排序详解
Apr 08 #Javascript
You might like
提升PHP速度全攻略
2006/10/09 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
Django框架序列化与反序列化操作详解
2019/11/01 Python
.NET概念性的面试题
2012/02/29 面试题
迟到检讨书500字
2014/02/05 职场文书
实习推荐信
2014/05/10 职场文书
销售活动策划方案
2014/08/26 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Nginx反向代理、重定向
2022/04/13 Servers