vue屏幕分辨率缩放 选择适合方案开发你的项目内附加最佳方案任选其一

Posted 2022-03-04 水香木鱼ゆ

此处的项目为vue2版本，因为pc端的项目没有采用响应式自适应手机端的设计，所以使用lodash插件实现屏幕移动端自适应。

方案一 使用lodash插件

首先下载lodash插件。

npm i lodash -S

然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。

import _ from 'lodash'

然后给app容器挂上ref=“app”

<template>
    <div id="app" ref="app">
      <router-view />
    </div>
</template>

然后在mounted使用如下方法（其中的1080以及1920为定义的画布尺寸）：

<script>
import _ from "lodash";
export default 
  name: "App",
  mounted() 
    this.$nextTick(() => 
      const $app = this.$refs.app;
      // 设置 屏幕 百分比 尺寸 适配
      const standardScale = "100%" / "100%";

      window.addEventListener(
        "resize",
        _.debounce(function () 
          const docHeight = document.body.clientHeight;
          const docWidth = document.body.clientWidth;

          if (docWidth < 1680) 
            const currentScale = docHeight / docWidth;
            let [scale, translate] = [0, 0];
            if (currentScale < standardScale) 
              // 以高度计算
              scale = docHeight / 1080;
              const shouleWidth = 1920 * scale;
         
              const offsetWidth = docWidth - shouleWidth;
              translate =
                offsetWidth > 0 ? `translate($offsetWidth / 2px, 0)` : "";
             else 
              // 以宽度计算
              scale = docWidth / 1920;
              const shouleHeight = 1080 * scale;
              const offsetHeight = docHeight - shouleHeight;
              translate =
                offsetHeight > 0 ? `translate(0, $offsetHeight / 2px)` : "";
            
            console.log(translate);
            $app.style.cssText = `
            transform: scale($scale) $translate;
            transform-origin: top left;
            min-width: 1920px;
            min-height: 1080px;
          `;
           else 
            $app.style.cssText = "";
          
        ),
        300
      );

      if (document.createEvent) 
        var event = document.createEvent("htmlEvents");
        event.initEvent("resize", true, true);
        window.dispatchEvent(event);
       else if (document.createEventObject) 
        window.fireEvent("onresize");
      
    );
  ,
;

注意：

使用屏幕分辨率，可以解决全局适配问题，但是有一个弊端
不适用于响应式，根据你的项目需求去选择

---

方案二：根据视口去做 页面适配

栗子：

如果你想要在1366x768 和1920x1080 甚至更大的屏幕去看你的项目，可以选择如下方案

• 定义：@remvw:1366 / 100vw;
• 使用方式：

 宽度为1145 时，`把原有的px 替换成我们定义的类型 @remvw` 
 【如果是百分比 % 就不需要去替换了、 凡是带有px的 都要替换为@remvw】

更多请参考如下栗子：

<style lang="scss" scoped>
//首先定义变量 @remvw
// 在1366的屏幕上除100%
//1vw = 可视窗口宽度的1%


@remvw:1366 / 100vw;

  .header 
    width: 1145/@remvw;
    height: 231/@remvw;
    background: #ffffff;
    box-shadow: 0/@remvw 0/@remvw 20/@remvw 0/@remvw rgba(57, 48, 160, 0.1);
    margin: 10/@remvw 0;
    .header-top 
      padding: 20/@remvw;
      height: 60/@remvw;
      border-bottom: 1/@remvw solid #e9eaed;
      // border-radius: 5/@remvw;
      p 
        margin: 0 0 0 10/@remvw;
        font-size: 15/@remvw;
        line-height: 21/@remvw;
        font-weight: 600;
        color: #424546;
      
      .iStyle 
        width: 16/@remvw;
        height: 16/@remvw;
        margin-right: 5/@remvw;
        img 
          width: 16/@remvw;
          height: 16/@remvw;
          vertical-align: middle;
          margin-bottom: 3/@remvw;
        
      
    
    .header-bom 
      width: 100%;
      height: 170/@remvw;
      display: flex;
      // justify-content: center;
      align-items: center;
      background: #ffffff;
      border-radius: 2/@remvw;
      #echarts 
        border-right: 1/@remvw solid #e9eaed;
      
      .header-bom-list 
        width: 229/@remvw;
        height: 170/@remvw;
        text-align: center;
        align-items: center;
        p:nth-child(1) 
          font-size: 30/@remvw;
          font-weight: 400;
          color: #424546;
          margin-top: 36/@remvw;
        
        p:nth-child(2) 
          font-size: 20/@remvw;
          font-weight: 600;
          color: #3930a0;
          line-height: 33px;
        
        p:nth-child(3) 
          font-size: 16/@remvw;
          font-weight: 400;
          color: #666666;
        
      
      .header-bom-list:nth-child(3) 
        p:nth-child(2) 
          color: #ff5c3d;
        
      
      .header-bom-list:nth-child(4) 
        p:nth-child(2) 
          color: #ffb0e3;
        
      
      .header-bom-list:nth-child(5) 
        p:nth-child(2) 
          color: #f4df58;
        
      
    
  
</style>