vue 等比例缩放

最新推荐文章于 2024-09-20 08:54:53 发布

Tabitha rufus

最新推荐文章于 2024-09-20 08:54:53 发布

阅读量7.4k

点赞数 5

文章标签： css html vue.js

本文链接：https://blog.csdn.net/yszyq/article/details/120455663

版权

本文介绍了如何使用Vue来实现等比例缩放，确保在不同分辨率下内容能一屏展示，避免滚动条和适配问题。不过这种方法可能会禁用浏览器的缩放功能。

摘要由CSDN通过智能技术生成

等比例缩放可以在不同的分辨率下都能够一屏展示，不会有滚动条的问题，也不会有适配问题。但是会导致浏览器的缩放功能失效。

代码如下：
app.vue

<template>
  <div id="app"
     :style="{
    'transform':`scale(${scalesNum}) translate(-50%,0)`,
    '-webkit-transform':`scale(${scalesNum}) translate(-50%,0)`,
    '-moz-transform':`scale(${scalesNum}) translate(-50%,0)`,
    '-o-transform':`scale(${scalesNum}) translate(-50%,0)`,
    '-ms-transform':`scale(${scalesNum}) translate(-50%,0)`}">