pxとDP（詳細単位当たりの多数の画素を含みます）

1.はじめに：

この記事を読んで何を学びます：

• DP（デバイスピクセル）
• PX（CSSピクセル）
• PT（ポイント）
• PPI（1インチあたりのピクセル数）
• DPI（インチあたりのドット数）
• DPR（デバイスピクセル比）
• ディップ（デバイス非依存ピクセル）

この論文を読んでの基本は何ですか、あなたは知っておく必要があります。

• 1インチ（インチ）== 2.5399999961392センチメートル
• 多くの場合、1インチは2.54センチメートルに等しいと
• 1メートル== 3フィート
• == 1フィート10インチ
• 1インチ== 3.33333333センチメートル
• iphone6 4.7インチの画面は4.7インチの画面の対角線の長さということを意味します
• iphone6_heightのIphone6アスペクト比：9：= 16 iphone6_width

2、DP（デバイスピクセル）

2.1説明

dp是设备像素，也叫物理像素，顾名思义，他就是指一个物理发光点的单位。
iphone6官方在产品说明书上写的屏幕分辨率为1334x750像素指的是物理分辨率。
也就是高1334dp，宽750dp。

3、PX（論理ピクセル）

3.1説明：

px是逻辑像素，逻辑像素是相对的单位。
在每个设备上对应的dp是不一样的是不一样的，在相同设备上对应的dp也可以不同。
这就是为什么我我们的图片可以放大缩小的原因。

4、PT（ポイント）

4.1説明

pt是专用的印刷单位“点”，这个单位是绝对单位.
1pt == 1/72in

5、PPI（1インチあたりのピクセル）

5.1説明

ppi指的是单位英寸长度上的平均孔数
iphone6官方在产品说明书上写像素密度为326ppi，指的就是在它的1in == 326dp

5.2、画素密度iphone6を計算します

第一の対角とアスペクト比が高さと幅から算出することができるiphone6の4.7inを介し：
iphone6_width = 2.304227826273027in = 2.3in
iphone6_height = 4.096405024485382in = 4.1in

そしてこれはPPIワイド画面と高解像度物理ことによって計算することができる
iphone6_width_ppi = 750dp / 2.3in = 326.0869565217391ppi
iphone6_height_ppi = 1334dp / 4.1in = 325.3658536585366ppi

描画することができ、幅と高さが326dpに非常にほぼ等しいです

6、DPI（インチあたりのドット数）

6.1説明

dpi是输出设备的物理能力
例如：300DPI的油墨打印机是指每英寸有300墨滴用于打印机，每英吋能印出的点的数目为300。
“像素”（p）只存在于计算机显示领域，而“点”（d）只出现于打印或印刷领域。

6.2、注意

在显示器中ppi和dpi是同一概念

図7に示すように、DPR（devicePixelRatio）

7,1の説明

window.devicePixelRatio是设备上物理像素和逻辑像素的比例。
dpr不是单位，是一个属性，在浏览器中通过 window.devicePixelRatio 获取屏幕的DPR。
在用微信开发者工具开发小程序的时候，在切换模拟器的时候可以看到各个设备的dpr，iphone6的设备dpr为2

8、DIP（デバイス非依存ピクセル）

8,1の説明

是由谷歌推出用来适配各个安卓屏幕差异的。
在定义UI布局时，应该使用一个虚拟像素单元，以一种密度独立的方式表示布局维度或位置。
密度无关的像素相当于一个物理像素在160 dpi屏幕上，这是系统为“中等”密度屏幕所假设的基线密度。
在运行时，系统会根据实际的屏幕密度，透明地处理dp单元的任何扩展。将dp单元转换为屏幕像素很简单：px=dp（dpi/160）。
例如，在240 dpi屏幕上，1 dp等于1。5物理像素。在定义应用程序的UI时，应该始终使用dp单元，以确保在具有不同密度的屏幕上正确显示UI。
就是说在160dpi的屏幕上，1dip=1px。
它跟屏幕密度有关，如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px。

9、卵

9.1、ビューポート

viewport是用户网页的可是窗口。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

9.2、コード例

<meta name="viewport" content="width=device-width, initial-scale=1.0">
特定の値を意味することは前に私が書いたものを参照することができますが、絶対に頭タグを知りません