uniapp stellt die Schriftart dynamisch auf eine einheitliche Größe ein

Bei der Entwicklung mobiler Anwendungen ist das UI-Design ein sehr wichtiger Teil. Dabei ist die Schriftgröße ein sehr wichtiger Teil, da sie sich direkt auf das Leseerlebnis des Benutzers auswirkt. In UniApp können wir die Schriftgröße auf einfache Weise dynamisch festlegen, um die Anwendungskonsistenz sicherzustellen.

Erste Methode: Globale Schriftgröße festlegen

Um die globale Schriftgröße festzulegen, können Sie die Variable Vue.config.produktionTip verwenden, um den globalen Stil festzulegen, wenn die Anwendung initialisiert wird. Fügen Sie den folgenden Code in App.vue hinzu:

export default {
    onLaunch: function() {
        Vue.config.productionTip = false
        uni.setGlobalStyle({
            'html,body': {
                fontSize: uni.upx2px(32) + 'px'
            }
        })
    }
}

Dabei konvertiert uni.upx2px(32) 32upx in die tatsächliche Pixelgröße. Dabei wird die Standardschriftgröße von 32 Pixeln verwendet.

Wenn Sie die Schriftgröße ändern müssen, können Sie die Option in den Einstellungen der Anwendung bereitstellen und die Benutzereinstellung lokal speichern. Beispielsweise können Benutzereinstellungen mithilfe der Uni-Storage-Komponente lokal gespeichert werden:

export default {
    methods: {
        onChangeFontSize: function(value) {
            uni.setStorageSync('font-size', value)
            uni.setGlobalStyle({
                'html,body': {
                    fontSize: uni.upx2px(value) + 'px'
                }
            })
        }
    }
}

Durch Aufrufen dieser Methode auf der Seite können verschiedene vom Benutzer ausgewählte Schriftgrößen festgelegt werden.

<uni-list>
    <uni-list-item v-for="(item, index) in fontSizes" :key="index" :title="item.title" :icon="item.value === currentFontSize ? 'checkmark' : ''" @click="onChangeFontSize(item.value)"></uni-list-item>
</uni-list>

Zweite Methode: Schriftgröße dynamisch je nach Komponententyp festlegen

Die zweite Methode besteht darin, unterschiedliche Schriftgrößen für verschiedene Komponenten festzulegen. Beispielsweise können für Schaltflächen und Textfelder unterschiedliche Schriftgrößen erforderlich sein. Das Attribut „custom-style“ kann der Komponente hinzugefügt werden, um die Komponente wie folgt zu formatieren:

<uni-button custom-style="font-size: 28upx;">My Button</uni-button>
<uni-input custom-style="font-size: 24upx;"></uni-input>

In diesem Beispiel stellen wir die Schaltfläche auf eine Schriftgröße von 28upx und das Textfeld auf eine Schriftgröße von 24upx ein. Beachten Sie noch einmal, dass wir Upx anstelle von Pixeln verwenden, um ein einheitliches Erscheinungsbild auf Geräten unterschiedlicher Größe zu gewährleisten.

Ein Nachteil dieser Methode besteht darin, dass Sie alle Komponenten in der Anwendung finden müssen, die die Schriftgröße ändern müssen, und das benutzerdefinierte Stilattribut manuell hinzufügen müssen. Wenn die Anwendung sehr groß ist, kann dies sehr umständlich werden.

Fazit

Alles in allem ist die dynamische Einstellung der Schriftgröße in UniApp sehr einfach. Sie können die Standardschriftgröße global festlegen und in der Anwendung Optionen für die Schriftgröße bereitstellen, oder Sie können die Schriftgröße für jede Komponente einzeln festlegen. Stellen Sie in jedem Fall sicher, dass Sie auf Geräten unterschiedlicher Größe ein einheitliches Erscheinungsbild beibehalten, um ein besseres Benutzererlebnis zu bieten.

Das obige ist der detaillierte Inhalt vonuniapp stellt die Schriftart dynamisch auf eine einheitliche Größe ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!