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淡入淡出渐变简单实例
Aug 06 Javascript
JavaScript中的Function函数
Aug 27 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
React Router基础使用
Jan 17 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
Vue列表页渲染优化详解
Jul 24 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
linux下php上传文件注意事项
2016/06/11 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
通过伪协议解决父页面与iframe页面通信的问题
2015/04/05 Javascript
javascript中关于&& 和 || 表达式的小技巧分享
2015/04/10 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
Python获取央视节目单的实现代码
2015/07/25 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
python调用百度语音识别api
2018/08/30 Python
学习和使用python的13个理由
2019/07/30 Python
Python使用grequests(gevent+requests)并发发送请求过程解析
2019/09/25 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
村捐赠仪式答谢词
2014/01/21 职场文书
贷款委托书范本
2014/04/08 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
中秋联欢会主持词
2015/07/04 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
MySQL分布式恢复进阶
2022/07/23 MySQL
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang