js实现适配不同的屏幕大小

更新时间：2017年04月10日 08:25:17 作者：语潸雪

本文主要介绍了通过js适配不同的屏幕大小的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

话不多说，请看代码：

// 通过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);

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

js实现屏幕自适应局部代码分享

js
屏幕

微信小程序实现录音功能
这篇文章主要为大家详细介绍了微信小程序实现录音功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
兼容Firefox的Javascript XSLT 处理XML文件
这篇文章主要介绍了兼容Firefox的Javascript XSLT 处理XML文件,需要的朋友可以参考下
2014-12-12
JS组件Bootstrap实现弹出框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框效果代码的相关资料，对弹出框感兴趣的小伙伴们可以参考一下
2016-04-04
JavaScript中的函数重载深入理解
将函数名作为指向函数的指针，有助于理解为什么ECMAScript中没有函数重载的概念,需要的朋友可以参考下
2014-08-08
优化 JavaScript 代码的方法小结
客户端脚本能让你的应用更加地动态和活跃，但是浏览器对代码的解析可能造成效率问题，而这种性能差异在客户端之间也不尽相同。这里我们讨论和给出一些优化你的 JavaScript 代码的提示和最佳实践。
2009-07-07
JS实现Excel文件与图片视频上传
这篇文章主要为大家学习介绍了JavaScript如何实现Excel文件与图片视频上传，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下
2023-07-07
JavaScript中获取HTML元素值的三种方法
这篇文章主要为大家详细介绍了JavaScript中获取HTML元素值的三种方法，分享了JavaScript中取得元素的方法，感兴趣的小伙伴们可以参考一下
2016-06-06
Javascript检查图片大小不要让大图片撑破页面
用Javascript判断图片大小，其实只要写一个简单的函数就可以了，使用其他语言进行判断，过程比较复杂，用 Javascript 判断轻松搞定
2014-11-11
js捕获鼠标滚轮事件代码
本文为大家介绍下如何使用js捕获鼠标滚轮事件，原理很简单，感兴趣的朋友可以参考下
2013-12-12
微信小程序利用co处理异步流程的方法教程
最近在学习微信小程序，下面就学习的内容进行总结，这篇文章主要给大家介绍了关于微信小程序利用co处理异步流程的方法，文中给出了详细的介绍和示例代码供大家参考学习，需要的朋友们下面来一起看看吧。
2017-05-05

js实现适配不同的屏幕大小

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具