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 相关文章推荐
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
May 28 Javascript
JS中递归函数
Jun 17 Javascript
深入浅析search 搜索框的写法
Aug 02 Javascript
jquery UI Datepicker时间控件冲突问题解决
Dec 16 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
vue 使用鼠标滚动加载数据的例子
Oct 31 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/12/06 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP之sprintf函数用法详解
2014/11/12 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
2014/02/13 Javascript
使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
2014/06/05 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python 自动去除空行的实例
2018/07/24 Python
Python自动发送邮件的方法实例总结
2018/12/08 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
QML使用Python的函数过程解析
2019/09/26 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
家电业务员岗位职责
2014/03/10 职场文书
学生评语大全
2014/04/18 职场文书
志愿者活动总结报告
2014/06/27 职场文书
运动会稿件100字
2014/09/24 职场文书
2014年城管工作总结
2014/11/20 职场文书
优秀党支部申报材料
2014/12/24 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL