js监听屏幕的改变

最新推荐文章于 2024-05-16 20:48:29 发布
最新推荐文章于 2024-05-16 20:48:29 发布
阅读量6k 收藏 5
点赞数 3
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fxs12138/article/details/85231386
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div style="width: 2.6rem;height:1.6rem;border: 1px solid black">

</div>
</body>
<script>
  refresh();
  window.onresize = function () {  //监听屏幕的改变
    setTimeout(function () {
      refresh();
    }, 10)
  };

  function refresh() {
    let devicewidth = document.documentElement.clientWidth;
    console.log(devicewidth);
    if (devicewidth > 1200) {
      document.documentElement.style.fontSize = 1200 / 12 + "px"
    } else {
      document.documentElement.style.fontSize = devicewidth / 7.5 + "px"  //设计稿物理分辨率（750）/100
    }
  }
</script>
</html>
易.金
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js判断屏幕分辨率的代码
12-12
一般我们可以通过下面的代码判断分辨率 代码如下:[removed]  <!– Begin  function redirectPage() {  var wjb51=screen.width;var hjb51=screen.height;alert(“经系统检测，你的屏幕分辨率为 ” + wjb51+”*”+ hjb51 + “by 软件开发网jb51.net”);  }  // End –>  [removed] js判断浏览器分辨率 代码如下:[removed]function ScreenWidth(){            if (s
js 实现 检测屏幕分辨率
03-30
js 实现 检测屏幕分辨率! 值得下载看看!资源免费,大家分享!!
Web前端最全vue 监听窗体变化 echarts自适应，2024年最新京东的面试题
最新发布
2401_84617681的博客
05-16 833
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】窗体变化echarts报表重新渲染问题当窗体变化之后，echarts会搓板，不能自适应，需要处理，下面是处理的方式。就像下面这张图，如果不适应，当浏览器缩放echarts报表就是单纯的跟浏览器大小缩放（左），而自适应了之后，或根据浏览器缩放重新渲染合适的大小（右）。首先需要一个js文件 a.js，把他放到 public 文件夹 js 文件夹下就可以。
js屏幕改变触发事件
Hakim2214的博客
08-17 699
$(window).resize(function () { Search(); //你需要执行的方法 });
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
10-23
主要介绍了js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法,涉及javascript针对页面元素及样式属性的相关操作技巧,需要的朋友可以参考下
监听浏览器内分辨率
weixin_40601606的博客
01-19 1086
var t = window.devicePixelRatio; //加载页面百分比 document.body.style.zoom =1/ t; //修改页面百分比（1为100%）
threejs实现监听窗口变化自适应画面以及全屏和退出全屏
jieyucx的博客
06-20 797
如上图，我改变窗口大小之后，整个场景并没有跟着窗口的变化自适应。
js监听页面的可见的变化
huai42717的博客
12-03 2081
当切换页面时，有些程序还是在进行就有可能导致页面样式乱，就监听页面可见时的变化。html js 当我们切换页面时让程序停止，切换回来时在让程序运行。
js 监听H5页面的可见性变化
qq_30193097的博客
04-19 411
等元素中监听文档可见性的变化。当这些元素的文档从可见状态变为隐藏状态，或者从隐藏状态变为可见状态时，就会触发该事件。属性可以判断当前页面是否处于隐藏状态。如果页面隐藏，则停止计时器；如果页面可见，则开启定时器。事件，可以实现对页面可见性的响应，从而进行相应的操作。是一个事件，用于在 HTML5 的。
JavaScript监听触摸事件代码实例
10-15
在本文中，我们将深入探讨如何使用JavaScript监听触摸事件，并通过代码实例来理解其工作原理。 首先，触摸事件主要有三个基本事件类型： 1. `touchstart`：当用户首次触摸屏幕时触发，标志着一个触摸序列的开始。 ...
基于JavaScript实现屏幕滚动效果
10-20
总的来说，通过JavaScript实现屏幕滚动效果涉及到了DOM操作、事件监听、定时器的使用以及平滑动画的实现。理解这些核心概念对于任何想要提升网页交互性的开发者来说都是至关重要的。学习并熟练掌握这些技术，可以...
JavaScript改变地图DIV大小
12-14
在这个实例中，我们将探讨如何使用SuperMap iClient 7C for JavaScript来动态地改变地图显示在页面中的DIV元素的大小。 首先，理解基本概念：在HTML中，`<div>`元素是一个可塑性很强的容器，通常用来组织网页内容。...
Js实现双击鼠标自动滚动屏幕的示例代码
10-26
在JavaScript中，实现双击鼠标自动滚动屏幕的功能主要涉及到...总的来说，这个示例展示了如何通过JavaScript监听和响应用户行为，以及如何利用页面滚动API来改变网页状态，是学习JavaScript交互设计的一个基础案例。
js实现动态改变字体大小代码
10-26
例如，可以为不同的屏幕尺寸定义不同的字体大小，并通过JavaScript监听窗口大小的变化，以便在窗口尺寸变化时自动调整字体大小。 此外，现代Web开发中，我们还可以利用CSS变量（CSS Custom Properties）配合...
js监听页面大小变化
博哥的二进制世界
05-10 5692
js监听页面大小变化
JS监听窗口变化及获取页面大小
Sleeping_Fairy的博客
07-12 8355
JS监听窗口变化及获取页面大小一、页面初始化二、页面大小改变时大致思路：一、页面分为三个部分，上中下二、先获取页面总高度，然后每个部分按照百分比进行计算三、盒子设置 box-sizing属性，用来计算的实际高度 = 页面总高度 - 盒子外部总 margin；四、单个区域的高度 = 实际高度 * 百分比五、单个区域内部变化高度 = 单个区域高度 - 单个区域内部固定高度 今天做页面兼容的时候突然遇到这个问题，就简单写写； 监听页面大小改变主要注意两方面，一个是初始化的时候，另一个是页面大小改变的时候重新设置；
JavaScript 监听移动端横竖屏状态的几种方式
明天也要努力的博客
07-03 3628
关于 orientationchange 事件定义和用法： 在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。 当视图状态发生改变时，监听器对应的函数就会执行，而对应的 MediaQueryList 对象也会传入。这个对象包括两个属性：matches（布尔值），表示CSS media query是否与当前的显示状态匹配；media 对应传入的参数字符串。关于 matchMedia() 方法定义和用法： matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询
web前端入门到实战：好用的Js图表库
软件开发-前端开发-IT
08-05 1088
市面上有很多 JavaScript 图表库，本文则列出了其中的几款佼佼者，可以用在你的新项目中。 D3.js D3.js 是一个图形 JavaScript 库，功能众多，十分强大。你可以用它对文档做数据驱动的转换，然后将任意数据绑定到 DOM 上。 D3 是非常优秀的图表库。它有一些较小的技术模块，如颜色、轴、轮廓、层次结构、多边形、缓动等。这也意味着你需要学习很多知识才能用好它，上手并不容易。 ...
Vue,js 监听window窗口尺寸变化
草木疏博客
10-26 9442
vue,js,window窗口尺寸变化
js屏幕大小改变监听事件
06-10
你可以使用`window`对象的`resize`事件来监听屏幕大小的改变。例如，下面的代码可以在屏幕大小改变时输出当前屏幕的宽度和高度： ```javascript window.addEventListener('resize', function() { console.log('Window size: ' + window.innerWidth + ' x ' + window.innerHeight); }); ``` 在这个例子中，`resize`事件会在窗口大小改变时触发，然后我们可以使用`window.innerWidth`和`window.innerHeight`属性来获取当前窗口的宽度和高度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值