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中的History历史对象
Jan 16 Javascript
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
Nov 27 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
Vue实现手机计算器
Aug 17 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
jQuery动态产生select option下拉列表
2017/03/15 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
2017/11/27 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
2019/10/16 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
实例说明Python中比较运算符的使用
2015/05/13 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
讲解Python3中NumPy数组寻找特定元素下标的两种方法
2019/08/04 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
python 制作磁力搜索工具
2021/03/04 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
广州迈达威.net面试题目
2012/03/10 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
副护士长竞聘演讲稿
2014/04/30 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
鸡毛信观后感
2015/06/11 职场文书
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python