WeChatアプレットではrpxとrem単位で使用します。


原作者:小ちゃん   から:ライセンスアドレス
本論文ではrpxとremをWeChatアプレットに適用します。もしまだ入門していないなら、まず下から見てください。
WeChatウィジェット公式文書webアプリの変革remrpx単位公式文書rpx単位の基礎紹介
上のいくつかの文章を読んだら、本題に入りましょう。
一、レムの使用
1)jsに以下のコードを導入する。
(function (doc, win) {      
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {          
        var clientWidth = docEl.clientWidth;          
        if (!clientWidth) return;
        docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
    };      
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
2)設計原稿の幅からremとpxの直接的な変換式を算出する。
例えば、640 pxの設計原稿、変換式は上のjsの中のこの文によって【docEl.style.fontSize=20*(clientWidth/320)+px'】で、最終的に1 rem=20 x 640/320+px'=40 px;
3)設計原稿に基づいて1 rem=40 pxで各元素に単位転換を行う。
例えば、一つの元素の幅を測定します。400 pxです。最終cssにはwidth:400/40=10 remと書いてあります。
通常の状況では、レムの使用
二、rpxの使用
1)ウィジェットのrpxとpxの変換
例えば、デザイン原稿の750 px幅はおめでとうございます。psの幅はどれぐらいですか?それなら、どれぐらいのrpxを定義しますか?つまり、1 px=1 rpxです。
例えば、設計原稿640 pxの幅は残念ですが、1 px=750/640 rpxに変換してください。
小プログラムのrpxとpxの変換
2)アプレットではどうやってremを使い続けますか?
例えば、設計原稿750 pxの幅はこの時1 rem=(750/20)rpx=37.5 px
例えば、設計原稿640 pxの幅は、この時1 rem=(750/20)rpx=32 pxです。
アプレットでのremの使用
注意:設計原稿の数に関わらず、remとrpxの換算はいつも同じですが、remとpxは小プログラムでの換算はrem=設計原稿の幅/20です。これは私達が普段使っているremとは全く違います。
小さいプログラムは結局出てきて間もないです。以上の言論は公式文書に属しています。あるものは自分のものです。全部信じられないです。自分で測ってみなければ分かりません。