애플릿은 다른 모바일 장치에서 rpx 단위를 어떻게 설정해야 합니까?

요약: WeChat 미니 프로그램을 개발할 때 스타일 시트를 작성할 때 PX를 사용한 효과가 이상적이지 않은 상황에 자주 직면합니다. 일상적인 개발에서는 rem과 em을 반응형 레이아웃의 픽셀 단위로 사용하는 경우가 많습니다. 둘 다 상대적인 단위입니다. rem은 문서의 루트 요소에 상대적이고 em은 상위 요소에 상대적입니다. 그런데...

WeChat 미니 프로그램을 개발하다 보면 스타일 시트를 작성할 때 종종 문제가 발생합니다. PX는 이상적이지 않습니다. 일상적인 개발에서는 rem과 em을 반응형 레이아웃의 픽셀 단위로 사용하는 경우가 많습니다. 둘 다 상대적인 단위입니다. rem은 문서의 루트 요소에 상대적이고 em은 상위 요소에 상대적입니다. 그러나 WeChat 애플릿의 공식 문서에서는 rpx가 반응형 레이아웃 단위로 사용됩니다! 그렇다면 RPX는 무엇이고 어떻게 설정하나요? 오늘 좀 더 자세히 살펴보겠습니다.

[color=rgb(44,]
rpx(반응형 픽셀): 화면 너비에 따라 조정될 수 있습니다. 지정된 화면 너비는 750rpx입니다. 예를 들어 iPhone6에서는 화면 너비가 375px이고 물리적 픽셀이 750px이면 750rpx = 375px입니다. = 750 물리적 픽셀. , 1rpx = 0.5px = 1 물리적 픽셀 솔직히 처음에는 이해하지 못했습니다.
rpx가 정확히 무엇인가요? "750rpx = 375px = 750 물리적 픽셀"? 🎜>

시작하기 전에 픽셀, 물리적 길이, 기기 독립적 픽셀 및 기기 독립적 픽셀 비율에 대해 이야기해 보겠습니다.

[픽셀]: 본질적으로 물리적인 길이가 아니며 기본 원본 안료와 해당 회색조의 기본 인코딩을 나타냅니다.]: 가장 작은 픽셀입니다. 모니터의 물리적인 디스플레이 단위(컴퓨터, 휴대폰 화면) 각각의 물리적인 픽셀은 색상값과 밝기값으로 구성됩니다. [기기 독립적 픽셀]: 밀도 독립적 픽셀이라고도 하며 강조점은 밀도 독립적이며 실제로 처리되는 가상 픽셀입니다. 상관 관계에서 장치 픽셀로 변환된 컴퓨터 프로그램(예: CSS px) 이 상관 관계는 장치 픽셀 비율

[장치 픽셀 비율]을 나타냅니다. : 기기 픽셀 비율 = 물리적 픽셀 / 기기 독립 픽셀, 단위는 dpr

그래도 이해가 안 가시나요? 사진에서 모바일 장치의 해상도:

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

1. 장치의 너비와 높이는 375 * 667로 CSS에서 px(밀도 독립 픽셀)로 간주할 수 있는 것으로 알려져 있습니다. 2. 레티나 화면의 dpr은 2입니다.

iPhone6의 물리적 픽셀은 무엇인가요?

점점 주세요 학생 여러분!

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

결론:

다른 화면(일반 화면 vs 레티나 화면)에서는 CSS 픽셀이 나타내는 크기(물리적 크기)가 일관되고 다릅니다. 하나의 CSS 픽셀에 해당하는 물리적 픽셀 수가 일치하지 않습니다.

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

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

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

그래서 200*300(css 픽셀) img 태그가 너비와 높이가 375*667이고 dpr인 iPhone 6에서 완벽하게 표시된다면 2개 중에서 이미지 크기는 얼마나 되어야 합니까? 답은 400 * 600 입니다.

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

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

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

아이폰6가 아니라면?

1rpx = window.innerWidth/750.

1px = 1rpx * dpr.

2. 스타일 가져오기
외부 스타일 시트를 가져오려면 @import 문을 사용하세요. @import가 필요합니다. 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)스타일: 정적 스타일은 수업시간에 통일적으로 작성됩니다. 스타일은 동적 스타일을 받아 런타임에 구문 분석합니다. 렌더링 속도에 영향을 주지 않으려면 스타일에 정적 스타일을 작성하지 마십시오.

[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)class: 스타일 규칙을 지정하는 데 사용되며 해당 속성 값은 스타일 규칙의 클래스 선택자 이름(스타일 클래스 이름)의 모음입니다. , 스타일 클래스 이름에는 .를 포함할 필요가 없으며, 스타일 클래스 이름은 공백으로 구분해야 합니다.

<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) 모바일 기기의 뷰포트는 사용할 수 있는 화면입니다. 표시하려면 웹페이지의 영역은 브라우저에서 웹페이지를 표시하는 데 사용되는 영역입니다
(2) 뷰포트는 반드시 브라우저나 기기 화면의 보이는 영역의 크기는 아닙니다. 보이는 영역보다 클 수도 있고, 보이는 영역보다 클 수도 있습니다. 뷰포트의 크기를 설정할 수 있기 때문입니다.
(3) 대부분의 모바일 장치의 기본 뷰포트는 980px입니다. 대부분의 경우 장치 너비보다 크므로 일반적으로 모바일 측에서 뷰포트를 재설정해야 합니다. width=device-width
(4) JavaScript를 통해 뷰포트를 얻는 방법: document.documentElement.clientWidth, 얻는 방법 device-width window.innerWidth, 장치 픽셀 비율 가져오기 window.devicePixelRatio
(5) iPhone4의 Apple Retina 화면이 도입되었습니다. 하나의 CSS 픽셀은 여러 물리적 픽셀을 나타낼 수 있으며 페이지가 다른 비율로 조정되면 1px CSS는 여러 장치 픽셀을 나타낼 수도 있습니다
(6) CSS 픽셀과 장치 해상도에 언급된 해상도 픽셀은 개발 중인 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倍大小显示,才能保证清晰。

위 내용은 애플릿은 다른 모바일 장치에서 rpx 단위를 어떻게 설정해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!