So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

 <div Klasse="Bildschirmadapter">
 </div>
 
 .Bildschirmadapter {
  Breite: 100vw;
  Mindesthöhe: 100 %;
  max. Höhe: 100vh;
  Überlauf: versteckt;
  Hintergrund: #0c1a3c;
}

<div Klasse="Bildschirmadapter">
    <div Klasse="content-wrap" :style="Stil">
      <Steckplatz></Steckplatz>
    </div>
</div>
Requisiten: {
    w: { // Entwurfszeichnungsgröße Breite Typ: Zahl,
      Standard: 1600
    },
    h: { // Konstruktionszeichnungsgröße Höhe Typ: Zahl,
      Standard: 900
    }
},
Daten () {
    zurückkehren {
      Stil: {
        Breite: diese.w + 'px',
        Höhe: this.h + 'px',
        transform: 'scale(1) translate(-50%, -50%)' // Keine Skalierung standardmäßig, vertikale und horizontale Zentrierung}
    }
}
  
.Inhalts-Wrap {
  Transform-Ursprung: 0 0;
  Position: absolut;
  oben: 50 %;
  links: 50%;
}

montiert () {
    dies.setScale()
    dies.onresize = dies.debounce(() => dies.setScale(), 100)
    window.addEventListener('Größe ändern', this.onresize)
},
vorZerstören () {
    window.removeEventListener('Größe ändern', this.onresize)
},
 Methoden: {
    // Entprellung (fn, t) {
      Konstante Verzögerung = t || 500
      Timer einschalten
      Rückgabefunktion () {
        const args = Argumente
        wenn (Zeitgeber) {
          Zeitüberschreitung löschen(Timer)
        }
        const Kontext = dies
        Timer = setzeTimeout(() => {
          Timer = null
          fn.apply(Kontext, Argumente)
        }, Verzögerung)
      }
    },
    // Skalierungsverhältnis ermitteln getScale () {
      const w = Fenster.innereWidth / this.w
      const h = Fenster.innereHeight / this.h
      gib w < h zurück? w : h
    },
    // Skalierungsverhältnis festlegen setScale () {
      this.style.transform = `Skala(${this.getScale()}) übersetzen(-50%, -50%)`
    }
  }

// ScreenAdapter.vue
<Vorlage>
  <div Klasse="Bildschirmadapter">
    <div Klasse="content-wrap" :style="Stil">
      <Steckplatz></Steckplatz>
    </div>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Requisiten: {
    w: {
      Typ: Nummer,
      Standard: 1600
    },
    H: {
      Typ: Nummer,
      Standard: 900
    }
  },
  Daten () {
    zurückkehren {
      Stil: {
        Breite: diese.w + 'px',
        Höhe: this.h + 'px',
        transformieren: 'skalieren(1) übersetzen(-50%, -50%)'
      }
    }
  },
  montiert () {
    dies.setScale()
    dies.onresize = dies.Debounce(() => dies.setScale(), 100)
    window.addEventListener('Größe ändern', this.onresize)
  },
  vorZerstören () {
    window.removeEventListener('Größe ändern', this.onresize)
  },
  Methoden: {
    Entprellen (fn, t) {
      Konstante Verzögerung = t || 500
      Timer einschalten
      Rückgabefunktion () {
        const args = Argumente
        wenn (Zeitgeber) {
          Zeitüberschreitung löschen(Timer)
        }
        const Kontext = dies
        Timer = setzeTimeout(() => {
          Timer = null
          fn.apply(Kontext, Argumente)
        }, Verzögerung)
      }
    },
    getScale() {
      const w = Fenster.innereWidth / this.w
      const h = Fenster.innereHeight / this.h
      gib w < h zurück? w : h
    },
    setzeSkala() {
      this.style.transform = `Skala(${this.getScale()}) übersetzen(-50%, -50%)`
    }
  }
}
</Skript>
<Stil>
.Bildschirmadapter {
  Breite: 100 %;
  Mindesthöhe: 100vh;
  max. Höhe: 100vh;
  Überlauf: versteckt;
  Hintergrund: #0c1a3c;
}
.Inhalts-Wrap {
  Transform-Ursprung: 0 0;
  Position: absolut;
  oben: 50 %;
  links: 50%;
}
</Stil>