微信小プログラム埋め込み穴の道(三):レイアウト適合案(rpx、px、vw、vh)

ウィジェットは微信をプラットフォームとして実行されるため、androidとiosのデバイスで同時に実行できるため、レイアウトの適合問題が避けられない.特にiphone 5では、画面サイズが小さいため、適合問題が最も多い機種でもある.以下、簡単にいくつかの適合方法を紹介する.
rpx適合
rpxはウィジェットの寸法単位で、以下の特徴があります.

ウィジェットのスクリーン幅は750 rpx(すなわち750個の物理画素)に固定され、すべてのデバイスで

である.

1 rpx=(screenWidth/750)px、そのうちscreenWidthは携帯電話の画面の実際の幅(単位px)であり、例えばiphone 6のscreenWidth=375 pxであれば、iphone 6における1 rpx=0.5 px

である
以上より、rpxとpxの変換は異なるが、幅のrpxは固定されているため、rpxを単位としてレイアウトの幅を設定することができる.
vw、vh適合
vwとvhはcss 3の新しい単位であり、ウィンドウ単位であり、ウィジェットでも同様に適用される.

ウィジェットでは、ウィンドウ幅を100 vwに固定し、ウィンドウ幅を平均100部に分け、1部は1 vw

である.

ウィジェットでは、ウィンドウの高さを100 vhに固定し、ウィンドウの高さを平均100部に分け、1部は1 vh

である.
したがって,ウィジェットではvw,vhを寸法単位としてレイアウトに用いることもできるが,一般的には +rpxで十分な使用が可能であるため,それらの出場機会は少ない.