css scale() 方法 控制各元素的宽高比（避免压缩）

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：


示例代码：



div {
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

transform: scale(1,1.18);
-ms-transform: scale(1,1.18); /* IE 9 */
-webkit-transform: scale(1,1.18); /* Safari 和 Chrome */
-o-transform: scale(1,1.18); /* Opera */
-moz-transform: scale(1,1.18); /* Firefox */



往往 结合  screenSize  Js一起用。
HTML：
<div class="wrap" ref="editor">


JS：
import { screenSize } from '@/assets/js/utils'



 mounted() {
    screenSize(this.$refs.editor)
}


JS全文：

// 屏幕缩放
export function screenSize(editorDom) {
  let screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
  let screenHeight = document.body.clientHeight || document.documentElement.clientHeight;


    // document.body.clientWidth;        //网页可见区域宽(body)
    // document.body.clientHeight;       //网页可见区域高(body)
    // document.body.offsetWidth;       //网页可见区域宽(body)，包括border、margin等
    // document.body.offsetHeight;      //网页可见区域宽(body)，包括border、margin等 // document.body.scrollWidth;        //网页正文全文宽，包括有滚动条时的未见区域
    // document.body.scrollHeight;       //网页正文全文高，包括有滚动条时的未见区域
    // document.body.scrollTop;           //网页被卷去的Top(滚动条)
    // document.body.scrollLeft;           //网页被卷去的Left(滚动条)
    // window.screenTop;                     //浏览器距离Top
    // window.screenLeft;                     //浏览器距离Left
    // window.screen.height;                //屏幕分辨率的高
    // window.screen.width;                 //屏幕分辨率的宽
    // window.screen.availHeight;          //屏幕可用工作区的高
    // window.screen.availWidth;           //屏幕可用工作区的宽

  let defWidth = 1920;
  let defHeight = 1080;

  let xScale = screenWidth / defWidth;
  let yScale = screenHeight / defHeight;
  editorDom.style.cssText += ';transform: scale(' + xScale + ',' + yScale + ')';

  $(window).resize(() => {
    let screenWidth = document.body.clientWidth || document.documentElement.clientWidth;
    let screenHeight = document.body.clientHeight || document.documentElement.clientHeight;
    xScale = screenWidth / defWidth;
    yScale = screenHeight / defHeight;
    editorDom.style.cssText += ';transform: scale(' + xScale + ',' + yScale + ')';
  })
}