アプレットはさまざまなモバイル デバイスで rpx ユニットをどのように設定する必要がありますか?

WeChat ミニプログラムを開発しているとき、スタイルシートを記述するときに PX を使用する効果が理想的ではないことが判明する状況によく遭遇します。日常の開発では、レスポンシブ レイアウトのピクセル単位として rem と em を使用することがよくあります。これらはどちらも相対的な単位です。 rem はドキュメントのルート要素を基準とし、em は親要素を基準とします。しかし、WeChat アプレットの公式ドキュメントでは、rpx はレスポンシブ レイアウト ユニットとして使用されています。 RPX とは何ですか?また、その設定方法は何でしょうか?今日は詳しく見てみましょう。

[color=rgb(44,])
rpx (レスポンシブピクセル): 画面幅に応じて調整できます。指定された画面幅は 750rpx です。たとえば、 iPhone6の画面の幅は375pxで合計750物理ピクセルあるので、750rpx = 375px = 750物理ピクセル、1rpx = 0.5px = 1物理ピクセル

となります。正直、最初は理解できませんでした rpx 「750rpx = 375px = 750 物理ピクセル」という文をどのように理解すればよいでしょうか? 始める前に、ピクセル、物理的な長さについて話しましょう。 、デバイスに依存しないピクセル、デバイスに依存しないピクセル比率とは何ですか?

[ピクセル]: これは、自然の物理的な長さではなく、基本的な元の顔料とそのグレースケールの基本的なエンコーディングを指します。

[物理ピクセル]: モニター (コンピューター、携帯電話の画面) の最小の物理的な表示単位であり、各物理ピクセルは色の値と輝度の値で構成されています。物理ピクセルはモニター上の最小の点を指すことに注意してください。 [デバイスに依存しないピクセル]: 密度に依存しないピクセルとも呼ばれます。重要な点は、仮想ピクセル (CSS など) です。 px) は、実際にコンピューター プログラムによって処理され、この相関関係は、以下で紹介するデバイス ピクセル比

[デバイス ピクセル比]: デバイス ピクセル比 = 物理ピクセル / デバイス独立ピクセルに変換されます。 、単位は dpr です

写真からモバイルデバイスの解像度と rpx の関係を見てみましょう:

例:

1. デバイスの幅と高さは 375 * 667 であり、CSS の px (密度に依存しないピクセル) と考えることができます。2. Retina スクリーンの dpr は 2 であることが知られています。

iPhone6の物理ピクセルは何ですか?

学生の皆さん、サブ質問を送ってください！

式によれば、iPhone 6の物理ピクセルは750 * 1334であると計算されました

結論:

異なる画面(通常画面とRetina画面)では、CSSピクセル 表示されるサイズ (物理サイズ) は一致していますが、CSS の 1 ピクセルに対応する物理ピクセル数が一致していない点が異なります。

通常の画面では、1 css ピクセルは 1 物理ピクセル (1:1) に対応します。 Retina スクリーンでは、1 CSS ピクセルは 2*2 物理ピクセル (1:4) に対応します。

[ビットマップ ピクセル]: ビットマップ ピクセルは、ラスター イメージ (png、jpg、gif など) の最小データ単位です。各ビットマップ ピクセルには、独自の表示情報 (表示位置、色の値、透明度など) が含まれています。複雑に感じますか？ 1px が画像の最小点を表すことを覚えておく必要があります。信じないで？ PS を使って画像を拡大してみましょう。画像が無数の点に分割されていることがわかりますが、それらの小さな点はすでにピクセルレベルの点であるため、再度分割することはできません。

理論的には、ビットマップの 1 ピクセルが 1 物理ピクセルに対応するため、画像は完全かつ鮮明に表示されます。

それでは、幅と高さが 375 * 667、dpr が 2 の iPhone 6 で 200*300 (CSS ピクセル) の img タグを完全に表示するには、画像のサイズはどれくらいあるべきでしょうか?答えは、400 * 600 です。

これは、iPhone 6のデザイン案のサイズを750*1334に基づいて設計する目的です。

本題に戻ります... rpxとは何ですか?

上記の伏線により、iPhone6 の場合、1rpx = 1 物理ピクセル、1rpx = 0.5px であることが分かります

iPhone 6 ではない場合はどうなるでしょうか?

1rpx = window.innerWidth/750。

1px = 1rpx * dpr.

2. スタイルのインポート @import ステートメントを使用して、インポートする必要がある外部スタイル シートの相対パスを指定します。声明の終わり。

[AppleScript] プレーンテキストビュー コードをコピー

<span style="color:rgb(44, 62, 80)"><span style="background-color:rgb(249, 249, 245)"><span style="font-family:""><span style="font-size:16px">@import "common.wxss";  <br/>@import "temp/loadBottomTemp/loadBottomTemp.wxss";  </span></span></span></span>

3. フレームコンポーネントはスタイルとクラスの属性をコントロールします。 。
(1)style: 静的スタイルはクラス内で均一に記述されます。 style は動的スタイルを受け取り、実行時にそれらを解析します。レンダリング速度への影響を避けるために、静的スタイルを style に書き込むことは避けてください。

[AppleScript] プレーンテキストビュー コードをコピー

<span style="color:rgb(44, 62, 80)"><span style="background-color:rgb(249, 249, 245)"><span style="font-family:""><span style="font-size:16px">//动态样式  <br/><view style="color:{{color}};" />  <br/>style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx";  <br/>//静态样式  <br/>style="color: #1083E5;font-size: 48rpx;font-weight:bold;"  </span></span></span></span>

(2)クラス: スタイル ルールを指定するために使用されます。その属性値はスタイル ルール内のクラス セレクター名 (スタイル クラス名) のコレクションです。スタイル クラス名には . を含める必要はなく、スタイル クラス名はスペースで区切られます。

<span style="color:rgb(44, 62, 80)"><span style="background-color:rgb(249, 249, 245)"><span style="font-family:""><span style="font-size:16px"><view class="normal_view" />  <br/>class="container-row buydes-center-des-select"  </span></span></span></span>

4. セレクター現在サポートされているセレクターは次のとおりです。

5. ローカルとは異なるグローバルスタイルスタイル、app.wxss で定義されたスタイルはグローバル スタイルであり、すべてのページに適用されます。ページの wxss ファイルで定義されたスタイルはローカル スタイルであり、対応するページにのみ適用され、app.wxss 内の同じセレクターをオーバーライドします。 2: デバイスの物理ピクセル (デバイスのピクセル) デバイスの論理ピクセル (デバイスに依存しないピクセル) コード CSS ピクセル デバイスのピクセルはビューポートよりも理解が深い

1.サイズ) 理解と知識の蓄積(1) モバイルデバイスのビューポートは、Web ページを表示するために使用できるデバイスの画面上の領域であり、Web ページを表示するために使用されるブラウザ上の領域です (2) ビューポートは必ずしもブラウザである必要はありません。または、デバイス画面の表示領域のサイズは、設定できるため、表示領域よりも大きいか小さい可能性があります
(3) ほとんどのデフォルトのビューポートモバイルデバイスは 980px です。ほとんどの場合、デバイスの幅より大きくなければなりません。そのため、一般的に、幅 = デバイスの幅になるようにビューポートをモバイル側でリセットする必要があります。 (4) JavaScript を使用してビューポートを取得する方法: ドキュメント。 documentElement.clientWidth、デバイス幅の取得方法は window.innerWidth、デバイスのピクセル比を取得します window.devicePixelRatio (5) Apple は iPhone4 以降、1 つの CSS ピクセルで複数の物理ピクセルを表すことができるようになりました。は他の比率にスケーリングされ、CSS の 1 ピクセルは複数のデバイスを表すこともできます (6) フロントエンド開発の CSS ピクセルはデバイスの解像度とは関係がありません。デバイスのピクセル比

2.移动端的HTML5开发META的常用设置

<span style="color:rgb(44, 62, 80)"><span style="background-color:rgb(249, 249, 245)"><span style="font-family:""><span style="font-size:16px"><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">  <br/><meta content="yes" name="apple-mobile-web-app-capable">  <br/><meta content="black" name="apple-mobile-web-app-status-bar-style">  <br/><meta content="telephone=no" name="format-detection">  </span></span></span></span>

第一个meta标签表示：强制让文档的宽度(viewport宽度)与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览；
width - viewport的宽度 height - viewport的高度 [device-width(设备的物理像素宽) | pixel_value] pixel_value是具体的像素值
案例:

 <meta content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放,这里有的资料写成no有的写成0
第二个meta标签是iphone设备中的safari私有meta标签,它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式；
在web app应用下状态条（屏幕顶部条）的颜色；
默认值为default（白色）,可以定为black（黑色）和black-translucent（灰色半透明）。
注意：若值为“black-translucent”将会占据页面px位置,浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

HTML5 META标签常用设置参考资料点击打开链接点击打开链接 点击打开链接

3.设备物理像素(设备像素),设备逻辑像素(设备独立像素),代码CSS像素,设备像素比
设备物理分辨率(device pixels):物理分辨率也叫设备像素,物理分辨率是LED显示屏显示的图像原始分辨率

设备逻辑分辨率(device independent pixels):人对于物体真实尺寸的认知(屏幕大小),设计使用逻辑像素来思考界面

代码CSS像素:CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位是抽象的,而不是实际存在的

iphone 6为例(设备像素比是2):
设备物理像素(设备像素):750x1334
设备逻辑像素(设备独立像素):375x667
代码CSS像素:375x667
device-width(设备的物理像素宽):375 (1 CSS PX = 2 设备的物理像素)

**案例：**iphone 6s 的物理像素是750x1334,JS中window.innerWidth就是获取设备的物理像素,为什么window.innerWidth获取的值是375而不是750呢?
因为window.innerWidth的值是用CSS pixels来表示的,而iphone 6s的设备像素比是2,1 CSS PX = 2 设备的物理像素,所以window.innerWidth获取的值是375px,而不是750px(750px = 375px * 设备像素比)

在1倍率的屏幕上: 1 CSS PX = 1 设备的物理像素
在2倍率的屏幕上: 1 CSS PX = 2 设备的物理像素
设备像素比=设备像素/设备独立像素(物理像素/逻辑像素)
图片实际像素 = 图片逻辑像素/设备像素比

1倍：1pt=1dp=1px（mdpi、iPhone 3gs）  
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）  
3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）

ログイン後にコピー

以iPhone 5s为例,屏幕的分辨率是640×1136,倍率是2。浏览器会认为屏幕的分辨率是320×568,仍然是基准倍率的尺寸。
所以在制作页面时,只需要按照基准倍率来就行了。无论什么样的屏幕,倍率是多少,都按逻辑像素尺寸来设计和开发页面。
只不过在准备资源图的时候,需要准备2倍大小的图,通过代码把它缩成1倍大小显示,才能保证清晰。