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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
Mar 22 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
Jun 08 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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抓取https的内容的代码
2010/04/06 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
图解js图片轮播效果
2015/12/20 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[00:16]热血竞技场
2019/03/06 DOTA
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
Python 调用Java实例详解
2017/06/02 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
python selenium操作cookie的实现
2020/03/18 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
redis限流的实际应用
2021/04/24 Redis
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
SQL SERVER存储过程用法详解
2022/02/24 SQL Server