PC端自适应

最新推荐文章于 2024-08-27 16:31:14 发布

woshi759956817

最新推荐文章于 2024-08-27 16:31:14 发布

阅读量391

点赞数

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/woshi759956817/article/details/123543705

版权

屏幕适配窗口监听 JavaScript CSS样式 DOM操作

关键词由CSDN通过智能技术生成

1

data中属性定义

windowWidth: document.documentElement.clientWidth - 300（其他区域部分）, //实时屏幕宽度
windowHeight: document.documentElement.clientHeight - 25300（其他区域部分）, //实时屏幕高度

2

标签中引入

:style="{ height: windowHeight + 'px', width: windowWidth + 'px' }"

3

监听属性让其自适应

mounted() {
    // 监听浏览器高度变化
    window.addEventListener(
      'resize',
      () => {
        this.windowWidth = document.documentElement.clientWidth - 300
        this.windowHeight = document.documentElement.clientHeight - 20
      },
      false
    )
  },