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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
JavaScript入门教程(3) js面向对象
Jan 31 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
Three.js基础部分学习
Jan 08 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
vue-cli常用设置总结
Feb 24 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 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 Http_Template_IT类库进行模板替换
2009/03/19 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
javascript事件问题
2009/09/05 Javascript
JavaScript 加号(+)运算符号
2009/12/06 Javascript
javascript中直接写php代码的方法
2013/07/31 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
ES6的新特性概览
2016/03/10 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
微信小程序常用简易小函数总结
2019/02/01 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[01:20]DOTA2 2017国际邀请赛冠军之路无止竞
2017/06/19 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
Python3实现腾讯云OCR识别
2018/11/27 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
会计工作心得体会
2014/01/13 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
天鹅湖观后感
2015/06/09 职场文书
公司安全管理制度范本
2015/08/05 职场文书
2016年小学感恩节活动总结
2016/04/01 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL