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 Lightbox 图片展示插件使用说明
Apr 25 Javascript
关于jQuery中的end()使用方法
Jul 10 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
当达到输入长度时表单自动切换焦点
Apr 06 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
浅谈Javascript中的Label语句
Dec 14 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 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中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
js三种排序算法分享
2012/08/16 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
js实现新年倒计时效果
2015/12/10 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
python抓取网页图片示例(python爬虫)
2014/04/27 Python
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
机电一体化毕业生求职信
2013/11/02 职场文书
毕业生自荐信
2013/12/14 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
教师考察材料范文
2014/06/03 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
建国大业观后感800字
2015/06/01 职场文书
历史博物馆观后感
2015/06/05 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers