Vue 实用大屏适配方案

LBJ辉

已于 2023-04-11 14:04:45 修改

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-04-11 13:53:50 首次发布

本文链接：https://blog.csdn.net/qq_36081714/article/details/130082155

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue 实用大屏适配方案

一、设计尺寸

项目的设计尺寸为 1920*1080（设计尺寸会对后面的适配有影响）

二、在 public 文件夹中新建一个`flexs.js`文件，然后填充如下代码：

//flexs.js
;(function (win) {
  var bodyStyle = document.createElement('style')
  // 这里根据具体的设计稿尺寸来定
  bodyStyle.innerHTML = `body{width:1920px; height:1080px!important;}`
  document.documentElement.firstElementChild.appendChild(bodyStyle)

  function refreshScale() {
    let docWidth = document.documentElement.clientWidth
    let docHeight = document.documentElement.clientHeight
    var designWidth = 1920, // 这里根据具体的设计稿尺寸来定
      designHeight = 1080, // 这里根据具体的设计稿尺寸来定
      widthRatio = docWidth / designWidth,
      heightRatio = docHeight / designHeight
    document.body.style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;overflow: hidden;`
    // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
    setTimeout(function () {
      var lateWidth = document.documentElement.clientWidth,
        lateHeight = document.documentElement.clientHeight
      if (lateWidth === docWidth) return

      widthRatio = lateWidth / designWidth
      heightRatio = lateHeight / designHeight
      document.body.style =
        'transform:scale(' +
        widthRatio +
        ',' +
        heightRatio +
        ');transform-origin:left top;overflow: hidden;'
    }, 0)
  }
  refreshScale()

  win.addEventListener(
    'pageshow',
    function (e) {
      if (e.persisted) {
        // 浏览器后退的时候重新计算
        refreshScale()
      }
    },
    false
  )
  win.addEventListener('resize', refreshScale, false)
})(window)

三、在 index.html 文件中引入文件

<body>
  <div id="app"></div>
  <!-- 引入JS -->
  <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
  <% } %>
  <!-- built files will be auto injected -->
</body>
<!-- 引入flexs.js  -->
<script type="text/javascript" src="<%= BASE_URL %>flexs.js"></script>

四、消除滚动条—在 App.vue 文件中，写入以下代码：

<style lang="scss">
body::-webkit-scrollbar {
  display: none;
}
</style>

好了，现在你就可以愉快的按照设计图尺寸写代码了。当然，要想看实际效果，还是需要按 F11 进入全屏模式才行。

LBJ辉

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue 实用大屏适配方案

大屏适配
复制链接

扫一扫

专栏目录

Vue 实用大屏适配方案

Vue 实用大屏适配方案

一、设计尺寸

二、在 public 文件夹中新建一个flexs.js文件，然后填充如下代码：

三、在 index.html 文件中引入文件

四、消除滚动条—在 App.vue 文件中，写入以下代码：

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

二、在 public 文件夹中新建一个`flexs.js`文件，然后填充如下代码：