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中typeof的使用示例
Dec 19 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JS实现页面载入时随机显示图片效果
Sep 07 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
小程序实现搜索框
Jun 19 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
javascript函数式编程基础
Sep 15 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不允许用户提交空表单(php空值判断)
2013/11/12 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
2014/12/16 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
Python中一行和多行import模块问题
2018/04/01 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python线性插值解析
2020/07/05 Python
python上selenium的弹框操作实现
2020/07/13 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
《槐乡五月》教学反思
2014/04/25 职场文书
党支部换届选举方案
2014/05/08 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
导游词之崇武古城
2019/10/07 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python