[小さなプログラム] uni-appを使用して、小さなプログラム環境サイズのユニットを構築します

uni-app サポートされている一般的なCSSユニットには、px、rpxが含まれます

pxは画面のピクセルです
rpxはレスポンシブpxであり、画面の幅に適応する動的ユニットです。750ワイドスクリーンに基づくと、750rpxはたまたまスクリーンの幅です。画面が広くなり、rpxの実際の表示効果が比例して拡大されます。

vueページは通常のH5ユニットをサポートしますが、nvueではサポートしません。

rpx 詳細な説明：

WeChatアプレットはこの問題を解決するためにrpxを設計uni-app し、アプリ側とH5側でサポートされてい rpxます。
rpxは、参照幅に対する相対的な単位であり、画面の幅に応じて調整できます。
uni-app 画面参照の幅を750rpxに指定します。
開発者は、デザインドラフトのベース幅に基づいてページ要素のrpx値を計算できます。デザインドラフト1pxとフレームスタイル1rpxの変換式は次のとおりです：　
デザインドラフト1px /デザインドラフトベース幅=フレームスタイル1rpx / 750rpx　

つまり、uni-app のページ要素の幅を計算するための式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度
例：
1. デザインドラフトの幅が750pxで、デザインドラフトの要素Aの幅が100pxの場合、要素Aの幅 uni-app は次のように設定する必要があります750 * 100 / 750。結果は100rpxです。
2. デザインドラフトの幅が640pxで、デザインドラフトの要素Aの幅が100pxの場合、要素Aの幅 uni-app は次のように設定する必要があります750 * 100 / 640。結果は117rpxです。
3. デザインドラフトの幅が375pxで、デザインドラフトの要素Bの幅が200pxの場合、要素Bのuni-app 内側の幅は次のように設定する必要があります750 * 200 / 375。結果は400rpxです。

チップ

rpxは幅に関連する単位であることに注意してください。画面が広いほど、実際のピクセルは大きくなります。画面の幅に合わせて拡大縮小したくない場合は、px単位を使用する必要があります。
開発者がフォントまたは高さにもrpxを使用する場合、この記述は、画面が広くなるにつれてフォントが大きくなり、高さが大きくなることを意味することに注意してください。高さを固定する必要がある場合は、pxを使用する必要があります。
rpxは動的な水平および垂直画面切り替え計算をサポートしていません。画面の向きをロックするにはrpxを使用することをお勧めします
デザイナーはiPhone6をビジュアルドラフトの標準として使用できます。
設計ドラフトが750pxでない場合、HBuilderXは自動変換用のツールを提供します。https：//ask.dcloud.net.cn/article/35445を参照してください。
アプリ側では、pages.jsonのtitleNViewに含まれるユニットまたはページに記述されたplus apiはpxのみをサポートし、rpxはサポートしません。
初期のユニアプリはupxを提供しました。rpxに変更することをお勧めします。詳細を参照してください