Wie soll das Applet die Rpx-Einheit auf verschiedenen Mobilgeräten einstellen?

Zusammenfassung: Wenn wir WeChat-Miniprogramme entwickeln, stoßen wir häufig auf Situationen, in denen wir feststellen, dass die Wirkung der Verwendung von PX beim Schreiben von Stylesheets nicht ideal ist. In der täglichen Entwicklung verwenden wir häufig rem und em als Pixeleinheiten für responsive Layouts. Beide sind relative Einheiten. rem ist relativ zum Stammelement des Dokuments und em ist relativ zum übergeordneten Element. Aber wenn...

Bei der Entwicklung von WeChat-Miniprogrammen stoßen wir beim Schreiben von Stylesheets häufig auf Probleme PX ist nicht ideal. In der täglichen Entwicklung verwenden wir häufig rem und em als Pixeleinheiten für responsive Layouts. Beide sind relative Einheiten. rem ist relativ zum Stammelement des Dokuments und em ist relativ zum übergeordneten Element. Aber im offiziellen Dokument des WeChat-Applets wird rpx als responsive Layout-Einheit verwendet! Was ist RPX und wie richtet man es ein? Schauen wir heute genauer hin.

[color=rgb(44,]
rpx (responsive Pixel): kann entsprechend der Bildschirmbreite angepasst werden. Die angegebene Bildschirmbreite beträgt beispielsweise 375 Pixel und es gibt 750 physische Pixel, also 750 Pixel = 750 physische Pixel. 1rpx = 1 physischer Pixel. Ehrlich gesagt habe ich es zunächst nicht verstanden. Wie ist der Satz zu verstehen? „750rpx = 375px = 750 physische Pixel“? 🎜>
Bevor wir beginnen, sprechen wir über Pixel, physische Länge, geräteunabhängige Pixel und geräteunabhängiges Pixelverhältnis

[Pixel]: Es handelt sich nicht um eine physikalische Länge, es bezieht sich auf die grundlegende Kodierung grundlegender Originalpigmente und ihrer Graustufen. Physikalisches Pixel]: Es ist das kleinste Die physische Anzeigeeinheit eines Monitors (Computer, Mobiltelefonbildschirm) besteht aus einem Farbwert und einem Helligkeitswert. Wir müssen bedenken, dass sich physische Pixel auf den kleinsten Punkt auf dem Monitor beziehen.

[Geräteunabhängiges Pixel]: Es wird auch dichteunabhängiges Pixel genannt, die Betonung liegt auf - dichteunabhängig, es handelt sich um ein virtuelles Pixel, das tatsächlich von verarbeitet wird ein Computerprogramm (z. B. CSS px), umgewandelt in Gerätepixel aus der Korrelationsbeziehung. Diese Korrelation bezieht sich auf das Gerätepixelverhältnis

[Gerätepixelverhältnis] : Gerätepixelverhältnis = physische Pixel / geräteunabhängige Pixel, die Einheit ist dpr! Auflösung mobiler Geräte aus dem Bild:

Nehmen Sie das iPhone6 ​​als Beispiel:

Es ist bekannt, dass 1. Die Breite und Höhe des Geräts 375 * 667 beträgt, was wir in CSS als px (dichteunabhängiges Pixel) betrachten können. 2. Der dpr des Retina-Bildschirms beträgt 2.

Was sind die physischen Pixel des iPhone6?

Gib mir Punkte, Studenten!

Gemäß der Formel haben wir berechnet, dass die physischen Pixel des iPhone 6 750 * 1334 betragen

Fazit:

Auf verschiedenen Bildschirmen (normaler Bildschirm vs. Retina-Bildschirm) ist die durch CSS-Pixel dargestellte Größe (physische Größe) konsistent und unterschiedlich Die Anzahl der physischen Pixel, die einem CSS-Pixel entsprechen, ist inkonsistent.

Auf einem normalen Bildschirm entspricht 1 CSS-Pixel 1 physischen Pixel (1:1). Auf einem Retina-Bildschirm entspricht 1 CSS-Pixel 2*2 physischen Pixeln (1:4).

[Bitmap-Pixel]: Ein Bitmap-Pixel ist die kleinste Dateneinheit eines Rasterbilds (z. B. PNG, JPG, GIF usw.). Jedes Bitmap-Pixel enthält einige seiner eigenen Anzeigeinformationen (z. B. Anzeigeposition, Farbwert, Transparenz usw.). Fühlen Sie sich kompliziert? Sie müssen sich nur daran erinnern, dass 1 Pixel den kleinsten Punkt eines Bildes darstellt. Glauben Sie es nicht? Verwenden wir PS, um ein Bild zu vergrößern. Sie können sehen, dass das Bild in unzählige Punkte aufgeteilt ist. Unabhängig davon, wie Sie diese kleinen Punkte vergrößern, können sie nicht erneut aufgeteilt werden, da es sich bereits um Punkte auf Pixelebene handelt.

Theoretisch entspricht 1 Bitmap-Pixel 1 physischen Pixel, sodass das Bild perfekt und klar dargestellt werden kann.

Um das 200*300 (CSS-Pixel) große IMG-Tag auf einem iPhone 6 mit einer Breite und Höhe von 375 * 667 und einem dpr von perfekt anzuzeigen 2, die Bildgröße sollte sein Für wie viel? Die Antwort lautet: 400 * 600.

Dies ist der Zweck der Größengestaltung unseres Designentwurfs für das iPhone 6 basierend auf 750*1334.

Zurück zum Thema... Was ist rpx?

Mit der obigen Vorahnung wissen wir, dass für iPhone6 ​​1rpx = 1 physisches Pixel, 1rpx = 0,5px;

Was ist, wenn es nicht das iPhone 6 ist?

1rpx = window.innerWidth/750.

1px = 1rpx * dpr.

2. Stilimport
Verwenden Sie die @import-Anweisung, um externe Stylesheets zu importieren, @import muss sein gefolgt von import Der relative Pfad des externen Stylesheets, wobei ; verwendet wird, um das Ende der Anweisung anzugeben.

[AppleScript] Einfache Textansicht Code kopieren

<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. Frame-Komponenten unterstützen die Verwendung von Stil- und Klassenattributen, um den Stil des zu steuern Komponente.
(1)Stil: Statische Stile werden im Unterricht einheitlich geschrieben. style empfängt dynamische Stile und analysiert sie zur Laufzeit. Bitte vermeiden Sie das Schreiben statischer Stile in style, um die Rendering-Geschwindigkeit nicht zu beeinträchtigen.

[AppleScript] Nur-Text-Ansicht Code kopieren

<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)Klasse: Wird zum Angeben von Stilregeln verwendet. Der Attributwert ist der Name des Klassenselektors (Name der Stilklasse) in der Stilregel Sammlungen und Stilklassennamen müssen kein „.“ enthalten und Stilklassennamen werden durch Leerzeichen getrennt.

<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. Auswahl Wird derzeit unterstützt Selektoren sind:

5. Globale Stile und lokale Stile Die in app.wxss definierten Stile sind globale Stile, die für jede Seite gelten. Die in der WXSS-Datei der Seite definierten Stile sind lokale Stile, die nur für die entsprechende Seite gelten und denselben Selektor in app.wxss überschreiben.

2: Physische Gerätepixel (Gerätepixel) Logische Gerätepixel (geräteunabhängige Pixel) Code CSS-Pixel Gerätepixelverhältnis Ansichtsfenster Detailliertes Verständnis

1. Konzeptionelles Verständnis und Wissensanhäufung des Ansichtsfensters (Größe des visuellen Bereichs) (1) Das Ansichtsfenster auf einem mobilen Gerät ist der Bildschirm, der verwendet werden kann um es anzuzeigen Der Bereich der Webseite ist der Bereich, der zum Anzeigen der Webseite im Browser verwendet wird
(2) Das Ansichtsfenster entspricht nicht unbedingt der Größe des sichtbaren Bereichs des Browsers oder des Gerätebildschirms kann größer als der sichtbare Bereich sein, oder er kann größer als der sichtbare Bereich sein. Der Anzeigebereich ist klein, da die Größe des Ansichtsfensters eingestellt werden kann
(3) Das Standard-Ansichtsfenster der meisten Mobilgeräte beträgt 980 Pixel ist in den meisten Fällen größer als die Gerätebreite, daher muss der Ansichtsbereich im Allgemeinen auf der mobilen Seite zurückgesetzt werden width=device-width
(4) So erhalten Sie den Ansichtsbereich über JavaScript: document.documentElement.clientWidth, wie man ihn erhält Gerätebreite window.innerWidth, Gerätepixelverhältnis abrufen window.devicePixelRatio
(5) Apple hat von iPhone4 Retina-Bildschirmen eingeführt. Ein CSS-Pixel kann mehrere physische Pixel darstellen, und wenn die Seite auf andere Verhältnisse skaliert wird, 1 Pixel CSS kann auch mehrere Gerätepixel darstellen
(6) CSS-Pixel und Die in der Geräteauflösung genannten Auflösungspixel haben nichts damit zu tun. Die in der Entwicklung befindlichen CSS-Pixel beziehen sich auf das Gerätepixelverhältnis

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倍大小显示,才能保证清晰。

Das obige ist der detaillierte Inhalt vonWie soll das Applet die Rpx-Einheit auf verschiedenen Mobilgeräten einstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!