JS获取网页可视区域宽度和高度——响应式布局奠基

最新推荐文章于 2024-07-16 14:46:16 发布

Gib Gas!

最新推荐文章于 2024-07-16 14:46:16 发布

阅读量937

点赞数

分类专栏：前端学习文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44584059/article/details/108507738

版权

前端学习专栏收录该内容

60 篇文章 2 订阅

订阅专栏

JS获取页面可视区域宽度和高度，为实现响应式布局奠基，实现效果为界面大小改变后，变色并显示当前屏幕大小适合的设备

JS代码

JS代码

// 获取网页可视区域宽度和高度的JS——响应式布局JS S
// 打开时就响应 屏幕改变
window.onresize = function () {
  responsive();
}
// 网页变大变小时也要实时响应
responsive();

function responsive() {
  if (client().width > 960) {
    document.body.style.backgroundColor = "red";
    document.body.innerHTML = "电脑屏幕";
  } else if (client().width > 640) {
    document.body.style.backgroundColor = "yellow";
    document.body.innerHTML = "平板屏幕";
  } else {
    document.body.style.backgroundColor = "blue";
    document.body.innerHTML = "手机屏幕";
  }
}

function client() {
  return {
    // 可视区域宽度
    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
    // 可视区域高度
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0,

  }
};
// 获取网页可视区域宽度和高度的JS——响应式布局JS S