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
屏幕

javascript实现base64 md5 sha1 密码加密
本篇文章给大家介绍了javascript实现密码加密，通过base64、md5、sha1文件，调用相关方法实现密码加密，非常简单，需要的朋友可以参考下
2015-09-09
详解全栈开发Vercel数据库存储服务
这篇文章主要为大家介绍了全栈开发Vercel数据库存储服务功能使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
这篇文章主要介绍了JS实现audio音频剪裁剪切复制播放与上传,本文分步骤通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-07-07
跟我学习javascript的var预解析与函数声明提升
跟我学习javascript的var预解析与函数声明提升，小编对var预解析与函数声明提升知识点也不甚了解，和大家一起学习本篇文章。
2015-11-11
微信小程序二维码生成工具 weapp-qrcode详解
这篇文章主要介绍了微信小程序二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件，通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2021-10-10
最全的Javascript编码规范(推荐)
本文给大家总结了js编码规范知识，非常实用，在日常程序开发中经常可以用到，大家务必掌握
2016-06-06
Echarts地图实例详解(地图样式、合并地图、增加地图)
ECharts是一个使用JavaScript实现的开源可视化库,涵盖各行业图表,满足各种需求,下面这篇文章主要给大家介绍了关于Echarts地图的相关资料,包括地图样式、合并地图、增加地图,需要的朋友可以参考下
2022-06-06
浅谈Fetch 数据交互方式
这篇文章主要介绍了浅谈Fetch 数据交互方式,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
js每隔两秒输出数组中的一项(实例)
下面小编就为大家带来一篇js每隔两秒输出数组中的一项(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Three.js利用Detector.js插件如何实现兼容性检测详解
这篇文章主要给大家介绍了关于Three.js利用Detector.js插件如何实现兼容性检测的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-09-09