Vue realisiert die Bildschirmanpassung von Großbildschirmseiten

In diesem Artikel wird der spezifische Code von Vue zur Bildschirmanpassung von Großbildseiten zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

1. Stellen Sie die Größe des Großbilddesigns in der Konfigurationsdatei auf 1920*1080 ein

//appConfig.js
Standard exportieren{
    Bildschirm:{
        Breite: 1920,
        Höhe: 1080,
        Maßstab: 20
    }//Große Bildschirmbreite und -höhe}

2. Definieren Sie resetScreenSize.js

importiere appConfig aus '../config/base'
 
Exportfunktion pageResize(Rückruf) {
    let init = () => {
        Konsole.log(Fenster.innereHöhe + "," + Fenster.innereBreite);    
        let _el = document.getElementById('app');
       
        sei hScale = window.innerHeight / appConfig.screen.height;
        sei wScale = window.innerWidth / appConfig.screen.width;
        let pageH = Fenster.innereHeight;
        let pageW = Fenster.innereWidth;
       
        let isWider = (window.innerWidth / window.innerHeight) >= (appConfig.screen.width / appConfig.screen.height);
        console.log(istWider);
        if (istBreiter) {
                _el.style.height = window.innerHeight+'px'; // '100 %';
                _el.style.width = SeiteH * appConfig.screen.width / appConfig.screen.height + 'px';
                _el.style.top='0px';
                _el.style.left=(Fenster.innereBreite -SeiteH * AppConfig.Bildschirmbreite / AppConfig.Bildschirmhöhe)*0,5+'px';
                Konsole.log(_el.style.Breite + "," + _el.style.Höhe)
        }
        anders {
                _el.style.width = window.innerWidth+'px'; // '100 %';
                _el.style.height = SeiteW * appConfig.screen.height / appConfig.screen.width + 'px';
                _el.style.top = 0,5*(Fenster.innereHöhe-Seitenbreite * appConfig.Bildschirmhöhe / appConfig.Bildschirmbreite)+'px';
                _el.style.left='0px';
                Konsole.log(_el.style.height);
                Konsole.log(_el.style.top);
        }
        document.documentElement.style.fontSize = (_el.clientWidth / appConfig.screen.scale) + 'px';
 
      
    }    
    var resizeEvt = 'Ausrichtungsänderung' im Fenster? 'Ausrichtungsänderung': 'Größe ändern';
    window.addEventListener(resizeEvt, init, false);
    document.documentElement.addEventListener('DOMContentLoaded', init, false);
    init()
}

3 Verwendung

main.js importieren

importiere appConfig aus „./config/base.js“;
Vue.prototype.appConfig=Anwendungskonfiguration;
app.Vue importiere {pageResize} von './utils/resetScreenSize' in der gemounteten Funktion
 
Standard exportieren {
  Name: "App",
  Daten(){
    zurückkehren {
       
    }
  },
  montiert(){
    Seite ändern();
    console.log('Seitengröße ändern');
  }
}

Stil lang="stylus" in der Komponente

 .mc{
        Anzeige: flexibel;
        Flex-Richtung: Spalte;
        Inhalt ausrichten: zentriert;
        Inhalt ausrichten: zentriert;  
        Anzeige: Flex;
        flex: 1 1 auto;
        Flex-Richtung: Spalte;
        Polsterung: (15/96) rem;
    }
 
    .leftC{
       Breite: (410/96)rem;
    }
 
    .centerC{
       Breite: (1060/96)rem;
    }
 
    .rightC{
       Breite: (450/96)rem;
    }

In der Konfigurationsdatei wird 96 aus 1920/20 abgeleitet, so dass keine diversen Konvertierungen nötig sind.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

VUE entwickelt die Hintergrundverwaltungsseitenschritte des verteilten medizinischen Registrierungssystems
Beispielschritte für VUE zum Erstellen einer Backend-Verwaltungsseite für ein verteiltes medizinisches Registrierungssystem
So implementieren Sie Seitensprünge in einem Vue-Projekt
VUE entwickelt Schritte für die Seite „Krankenhauseinstellungen“ für ein verteiltes medizinisches Registrierungssystem

<<: Detaillierte Erläuterung des Persistenzimplementierungsprinzips von Transaktionen in MySQL

>>: HTML validieren HTML-Validierung