Comment l'applet doit-elle définir l'unité rpx sur différents appareils mobiles ?

Résumé : Lorsque nous développons des mini-programmes WeChat, nous rencontrons souvent des situations où nous constatons que l'effet de l'utilisation de PX n'est pas idéal lors de l'écriture de feuilles de style. Dans le développement quotidien, nous utilisons souvent rem et em comme unités de pixels pour une mise en page réactive. Ce sont deux unités relatives. rem est relatif à l'élément racine du document et em est relatif à l'élément parent. Mais quand...

Lorsque nous développons des mini-programmes WeChat, nous rencontrons souvent des problèmes lors de l'écriture des feuilles de style. PX n'est pas idéal. Dans le développement quotidien, nous utilisons souvent rem et em comme unités de pixels pour une mise en page réactive. Ce sont deux unités relatives. rem est relatif à l'élément racine du document et em est relatif à l'élément parent. Mais dans le document officiel de l'applet WeChat, rpx est utilisé comme unité de mise en page réactive ! Alors, qu’est-ce que RPX et comment le configurer ? Regardons de plus près aujourd’hui.

[color=rgb(44,]
rpx (responsive pixel) : peut être adapté en fonction de la largeur de l'écran. La largeur d'écran spécifiée est de 750rpx. Par exemple, sur iPhone6, la largeur de l'écran est de 375px et il y a 750 pixels physiques, alors 750rpx = 375px. = 750 pixels physiques. , 1rpx = 0,5px = 1 pixel physique Pour être honnête, je ne l'ai pas compris au début
Qu'est-ce que rpx exactement ? "750rpx = 375px = 750 pixels physiques" ? 🎜>

Avant de commencer, parlons des pixels, de la longueur physique, des pixels indépendants de l'appareil et du rapport de pixels indépendant de l'appareil

[Pixel] : Ce n'est pas une longueur physique dans la nature, cela fait référence à l'encodage de base des pigments originaux de base et à leurs niveaux de gris. Pixel physique] : C'est le plus petit. unité d'affichage physique d'un moniteur (écran d'ordinateur, de téléphone portable). Chaque pixel physique est composé d'une valeur de couleur et d'une valeur de luminosité. Il faut se rappeler que les pixels physiques font référence au plus petit point du moniteur. [Pixel indépendant de l'appareil] : Il est également appelé pixel indépendant de la densité, l'accent est mis sur - indépendant de la densité, c'est un pixel virtuel réellement traité par un programme informatique (tel que css px), converti en pixels de l'appareil à partir de la relation de corrélation. Cette corrélation fait référence au rapport de pixels de l'appareil

[rapport de pixels de l'appareil]. : Ratio de pixels de l'appareil = pixels physiques / pixels indépendants de l'appareil, l'unité est dpr

Vous ne comprenez toujours pas, regardons la résolution et ? résolution des appareils mobiles à partir de l'image. La relation de rpx :

Prenons l'iPhone6 ​​​​comme exemple :

On sait que 1. La largeur et la hauteur de l'appareil sont de 375 * 667, que nous pouvons considérer comme px (pixel indépendant de la densité) en CSS 2. Le dpr de l'écran rétine est de 2.

Quels sont les pixels physiques de l'iPhone6 ​​?

Donnez-moi des points, étudiants !

Selon la formule, nous avons calculé que les pixels physiques de l'iPhone 6 sont de 750 * 1334

Conclusion :

Sur différents écrans (écran normal vs écran rétine), la taille (taille physique) présentée par les pixels CSS est cohérente et différente. le nombre de pixels physiques correspondant à un pixel CSS est incohérent.

Sur un écran normal, 1 pixel css correspond à 1 pixel physique (1:1). Sous écran Retina, 1 pixel CSS correspond à 2*2 pixels physiques (1:4).

[Pixel bitmap] : Un pixel bitmap est la plus petite unité de données d'une image raster (telle que png, jpg, gif, etc.). Chaque pixel bitmap contient certaines de ses propres informations d'affichage (telles que la position d'affichage, la valeur de couleur, la transparence, etc.). Vous vous sentez compliqué ? N'oubliez pas que 1px représente le plus petit point d'une image. Vous n'y croyez pas ? Utilisons PS pour agrandir une image. Vous pouvez voir que l'image est divisée en d'innombrables points, mais quelle que soit la façon dont vous agrandissez ces petits points, ils ne peuvent pas être à nouveau divisés car ce sont déjà des points au niveau du pixel.

Théoriquement, 1 pixel bitmap correspond à 1 pixel physique, afin que l'image puisse être affichée parfaitement et clairement.

Donc, pour afficher parfaitement la balise img 200*300 (pixel css) sur un iPhone 6 avec une largeur et une hauteur de 375*667 et un dpr de 2, la taille de l'image doit être de combien ? La réponse est : 400 * 600.

C'est le but de concevoir la taille de notre projet de conception pour iPhone 6 basé sur 750*1334.

Retour au sujet... Qu'est-ce que rpx ?

Avec la préfiguration ci-dessus, nous savons que pour l'iPhone6, 1rpx = 1 pixel physique, 1rpx = 0,5px;

Et si ce n'est pas l'iPhone 6 ?

1rpx = window.innerWidth/750.

1px = 1rpx *dpr.

2. Importation de style
Utilisez l'instruction @import pour importer des feuilles de style externes, @import doit être suivi de import Le chemin relatif de la feuille de style externe, en utilisant ; pour indiquer la fin de l'instruction.

[AppleScript] Affichage en texte brut Copier le code

<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. Style en ligne
Les composants de cadre prennent en charge l'utilisation d'attributs de style et de classe pour contrôler le style du composant.
(1)style : les styles statiques sont écrits uniformément en classe. style reçoit des styles dynamiques et les analysera au moment de l'exécution. Veuillez essayer d'éviter d'écrire des styles statiques dans style pour éviter d'affecter la vitesse de rendu.

[AppleScript] Affichage en texte brut Copier le code

<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)class : utilisé pour spécifier les règles de style, sa valeur d'attribut est le nom du sélecteur de classe (nom de la classe de style) dans la règle de style Les collections et les noms de classes de style n'ont pas besoin d'inclure "." et les noms de classes de style sont séparés par des espaces.

<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. Sélecteur
Actuellement pris en charge les sélecteurs sont :

5. Styles globaux et styles locaux
Les styles définis dans app.wxss sont des styles globaux, qui s'appliquent à chaque page. Les styles définis dans le fichier wxss de la page sont des styles locaux, qui s'appliquent uniquement à la page correspondante et remplaceront le même sélecteur dans app.wxss.

2 : Pixels physiques de l'appareil (pixels de l'appareil) Pixels logiques de l'appareil (pixels indépendants de l'appareil) Code CSS pixel de la fenêtre d'affichage du rapport des pixels de l'appareil compréhension approfondie

1. Compréhension conceptuelle et accumulation de connaissances sur la fenêtre d'affichage (taille de la zone visuelle)
(1) La fenêtre d'affichage sur un appareil mobile est l'écran qui peut être utilisé. pour l'afficher La zone de la page Web est la zone utilisée pour afficher la page Web sur le navigateur
(2) La fenêtre d'affichage n'est pas nécessairement la taille de la zone visible de l'écran du navigateur ou de l'appareil. peut être plus grande que la zone visible, ou elle peut être plus grande que la zone visible. La zone de visualisation est petite, car la taille de la fenêtre d'affichage peut être définie
(3) La fenêtre d'affichage par défaut de la plupart des appareils mobiles est de 980 pixels, ce qui est est plus grand que la largeur de l'appareil dans la plupart des cas, donc la fenêtre d'affichage doit généralement être réinitialisée du côté mobile. width=device-width
(4) Comment obtenir la fenêtre d'affichage via JavaScript : document.documentElement.clientWidth, comment l'obtenir. device-width window.innerWidth, obtenez le rapport de pixels de l'appareil window.devicePixelRatio
(5) Les écrans Apple de l'iPhone4 Retina ont été introduits. Un pixel CSS peut représenter plusieurs pixels physiques, et lorsque la page est mise à l'échelle selon d'autres ratios, 1 px de. CSS peut également représenter plusieurs pixels de l'appareil
(6) Les pixels CSS et les pixels de résolution mentionnés dans la résolution de l'appareil n'ont rien à voir avec cela. Les pixels CSS en développement sont liés au rapport de pixels de l'appareil
<. 🎜>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!