uniapp はフォントを均一なサイズに動的に設定します

モバイル アプリケーション開発において、UI デザインは非常に重要な部分です。中でもフォントサイズはユーザーの読書体験に直接影響するため、非常に重要な部分です。 UniApp では、アプリケーションの一貫性を確保するために、いくつかの簡単な方法でフォント サイズを動的に設定できます。

最初の方法: グローバル フォント サイズを設定する

グローバル フォント サイズを設定するには、アプリケーションの初期化時に Vue.config.productionTip 変数を使用してグローバル スタイルを設定します。 App.vue に次のコードを追加します。

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

このうち、uni.upx2px(32) は 32upx を実際のピクセル サイズに変換します。これでは、デフォルトのフォント サイズの 32 ピクセルが使用されます。

フォント サイズを変更する必要がある場合は、アプリケーションの設定でオプションを提供し、ユーザー設定をローカルに保存できます。たとえば、ユーザー設定は、uni-storage コンポーネントを使用してローカルに保存できます。

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

ページ上でこのメソッドを呼び出して、ユーザーが選択したさまざまなフォント サイズを設定します。

<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>

2 番目の方法: コンポーネントの種類に応じてフォント サイズを動的に設定する

2 番目の方法は、コンポーネントごとに異なるフォント サイズを設定することです。たとえば、ボタンとテキスト ボックスでは異なるフォント サイズが必要な場合があります。次のようにカスタム スタイル属性をコンポーネントに追加して、コンポーネントのスタイルを設定できます。

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

この例では、ボタンのフォント サイズを 28upx に設定し、テキスト ボックスのフォント サイズを 24upx に設定します。異なるサイズのデバイス間で一貫した外観を確保するために、ピクセルの代わりに upx を使用していることにもう一度注意してください。

この方法の欠点の 1 つは、フォント サイズを変更し、カスタム スタイル属性を手動で追加する必要があるアプリケーション内のすべてのコンポーネントを検索する必要があることです。アプリケーションが非常に大きい場合、これは非常に面倒になる可能性があります。

結論

要約すると、UniApp でフォント サイズを動的に設定するのは非常に簡単です。デフォルトのフォント サイズをグローバルに設定してアプリケーションでフォント サイズ オプションを提供することも、コンポーネントごとにフォント サイズを個別に設定することもできます。いずれにしても、より良いユーザー エクスペリエンスを提供するために、さまざまなサイズのデバイス間で一貫した外観と操作性を維持するようにしてください。

以上がuniapp はフォントを均一なサイズに動的に設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。