다양한 모바일 장치의 미니 프로그램에서 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개의 물리적 픽셀

솔직히 처음에는 이해가 되지 않습니다. "750rpx = 375px = 750 물리적 픽셀"이라는 문장을 어떻게 이해해야 할까요?

시작하기 전에 물리적인 픽셀에 대해 이야기해 보겠습니다. 장치 독립적인 픽셀 비율은 무엇입니까?

[픽셀]: 자연의 물리적 길이가 아니라 기본 원본 안료 및 해당 회색조의 기본 인코딩을 나타냅니다. 🎜>

[물리적 픽셀]: 모니터(컴퓨터, 휴대폰 화면)의 가장 작은 물리적 표시 단위입니다. 각 물리적 픽셀은 색상 값과 밝기 값으로 구성되어 있습니다. 물리적 픽셀은 모니터의 가장 작은 지점을 의미한다는 점을 기억해야 합니다. 🎜>【장치 독립적 픽셀】: 밀도 독립적 픽셀이라고도 합니다. 중요한 점은 가상 픽셀입니다. CSS px) 실제로 컴퓨터 프로그램에 의해 처리됩니다. 이 상관 관계는 장치 픽셀로 변환됩니다. 다음은 장치 픽셀 비율

[장치 픽셀 비율]: 장치 픽셀 비율 = 물리적 픽셀 / 장치 독립적입니다. 픽셀, 단위는 dpr입니다!

아직도 이해가 안 되시나요? 모바일 기기의 해상도와 사진의 rpx 사이의 관계를 살펴보겠습니다.

iPhone6 ​​​​예를 들어보세요:

알려진 사실, 1. 기기 너비와 높이가 375 * 667, 여기서는 CSS에서 px(밀도 독립 픽셀)로 생각할 수 있습니다. 2. dpr은 다음과 같습니다. 레티나 화면은 2입니다.

학생 여러분, 하위 질문입니다!

공식에 따르면 iPhone 6의 물리적 픽셀은 750 * 1334입니다.

결론:

다른 화면(일반 화면 vs 레티나 화면)에서 CSS 픽셀로 표시되는 크기(물리적 크기)는 동일하지만 차이점은 CSS 픽셀에 해당하는 물리적 픽셀 수입니다. 1개의 CSS 픽셀은 일관성이 없습니다.

일반 화면에서는 1개의 CSS 픽셀이 1개의 물리적 픽셀(1:1)에 해당합니다. 레티나 화면에서는 1개의 CSS 픽셀이 2*2 물리적 픽셀(1:4)에 해당합니다. ).

[비트맵 픽셀]: 1비트. 이미지 픽셀은 래스터 이미지(예: png, jpg, gif 등)의 가장 작은 데이터 단위입니다. 정보(예: 표시 위치, 색상 값, 투명도 등). 복잡한 느낌이 드시나요? 1px는 이미지의 가장 작은 지점을 나타낸다는 점만 기억하면 됩니다. 믿을 수 없나요? PS를 사용하여 사진을 확대해 보면 사진이 무수히 많은 점으로 분할되어 있는 것을 볼 수 있는데, 그 작은 점들은 아무리 확대해도 이미 픽셀 단위의 점이기 때문에 다시 분할할 수 없습니다.

이론적으로 1개의 비트맵 픽셀은 1개의 물리적 픽셀에 해당하므로 그림이 완벽하고 선명하게 표시될 수 있습니다.

그러면 너비와 높이가 375 * 667이고 dpr이 2인 iPhone 6에서 200*300(css 픽셀) img 태그를 완벽하게 표시하려면 이미지 크기가 어떻게 되어야 할까요? 답은 400 * 600 입니다.

저희 아이폰6 디자인 시안 사이즈를 750*1334 기준으로 디자인하는 목적입니다.

주제로 돌아가서... rpx란 무엇인가요?

위의 예를 통해 iPhone6의 경우 1rpx = 1개의 물리적 픽셀, 1rpx = 0.5px;

iPhone 6가 아니면 어떻게 될까요?

1rpx = window.innerWidth/750.

1px = 1rpx * dpr.

2. 스타일 가져오기

외부 스타일 시트를 가져오려면 @import 문을 사용하세요. @import 뒤에는 필요한 외부 스타일 시트의 상대 경로가 옵니다. 가져옴, ;로 표시됨 명령문이 종료됩니다.

아아아아

3.内联样式 
框架组件上支持使用 style、class 属性来控制组件的样式。 
(1)style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

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

(2)class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

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

4.选择器
目前支持的选择器有：

5.全局样式与局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

二：设备物理像素(设备像素) 设备逻辑像素(设备独立像素) 代码CSS像素 设备像素比 viewport深入理解

1.viewport(可视区域大小)的概念理解和知识积累
(1)移动设备上的viewport就是设备的屏幕上能用来显示网页的那一块区域,就是浏览器上用来显示网页的那部分区域
(2)viewport不一定是浏览器或者设备屏幕可视区域的大小,可能比可视区域大,也可能比可视区域小,因为viewport的大小是可以设置的
(3)大部分移动设备默认的viewport都是980px,多数情况下要大于device-width,因此一般都要在移动端重置viewport,让width=device-width
(4)通过JavaScript获取viewport的方式：document.documentElement.clientWidth,获取device-width的方式window.innerWidth,获取设备像素比window.devicePixelRatio
(5)苹果从iPhone4开始引进了Retina屏幕,一个CSS像素可以表示多个物理像素,并且在页面缩放到其他比例时候,也可以做到CSS 的1px表示多个device pixels
(6)前端开发中的CSS pixels和设备分辨率所讲的resolution pixels 无关,开发中的CSS pixels和设备像素比有关

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

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

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

<font style="color:rgb(44, 62, 80)"><font style="background-color:rgb(249, 249, 245)"><font face="""><font style="font-size:16px"> <meta content="width=375, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"></font></font></font></font>

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

위 내용은 다양한 모바일 장치의 미니 프로그램에서 rpx 단위를 설정하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!