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 相关文章推荐
jquery模拟按下回车实现代码
Sep 20 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php中的三元运算符使用说明
2011/07/03 PHP
zf框架的session会话周期及次数限制使用示例
2014/03/13 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享
2016/05/06 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
js的Prototype属性解释及常用方法
2014/05/08 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
2015/08/06 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
Angular工具方法学习
2016/12/26 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
微信小程序实现吸顶特效
2020/01/08 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
windows下Virtualenvwrapper安装教程
2017/12/13 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
浅析python的Lambda表达式
2019/02/27 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
使用WingPro 7 设置Python路径的方法
2019/07/24 Python
Laravel中Kafka的使用详解
2021/03/24 PHP
电大自我鉴定范文
2013/10/01 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
旅游与酒店管理专业求职信
2014/07/21 职场文书
国际贸易系求职信
2014/08/09 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
赢在执行观后感
2015/06/16 职场文书
银行求职信范文
2019/05/13 职场文书