資訊專欄INFORMATION COLUMN
摘要：方式，是用于把默認(rèn)以單位長(zhǎng)度，轉(zhuǎn)化為對(duì)應(yīng)的數(shù)值。屏幕的單位和概念對(duì)比在中，等于，表示像素密度。下面給出一些常見(jiàn)屏幕概念的對(duì)比表格與的關(guān)系為自適應(yīng)布局方案自適應(yīng)布局方案采用了，將等比放大到上的自適應(yīng)布局。
默認(rèn)單位 dp
設(shè)置默認(rèn)寬高的時(shí)，是不需要帶單位的，如下所示：
那么，布局的默認(rèn)單位是什么？在官方文檔中有一段關(guān)于布局單位的描述。
static getPixelSizeForLayoutSize(layoutSize: number) Converts a layout size (dp) to pixel size (px). Guaranteed to return an integer number.
getPixelSizeForLayoutSize 方式，是用于把默認(rèn)以 dp 單位長(zhǎng)度，轉(zhuǎn)化為對(duì)應(yīng)的 px 數(shù)值。那么很明顯， 默認(rèn)的布局單位是 dp。
1dp = 1(css)pxdp 到底是個(gè)什么樣單位？
關(guān)于 dp 官網(wǎng)給了我一個(gè)定義：
A dp is equal to one physical pixel on a screen with a density of 160.To calculate dp: dp = (width in pixels * 160) / screen density
很明顯， dp 與 物理px 有一個(gè)關(guān)于 (160/screen density) 的正相關(guān)的關(guān)系：
1dp = 1物理px （screen density = 160） 1dp = 2物理px （screen density = 320） 1dp = 3物理px （screen density = 480）
同理在 H5 頁(yè)面，以下等式是成立的。
1 (css)px = 1物理px （device pixel ratio = 1） 1 (css)px = 2物理px （device pixel ratio = 2） 1 (css)px = 3物理px （device pixel ratio = 3）
而實(shí)際上 (160/screen density) 就是 pixelRatio，也就是就是寫(xiě) H5 頁(yè)面時(shí)，像素比率 window.devicePixelRatio。
也就是說(shuō)，1dp = 1(css)px。
屏幕的單位和概念對(duì)比在 Android 中，screen density 等于 DPI，表示像素密度。
在 google 布局單位文檔中，關(guān)于 screen density 有過(guò)這樣的描述，
dpi 有過(guò)這樣的描述
其中 240/160 兩列，像素比同為1.5，可證明 screen density 和 dpi概念一樣，只是換了個(gè)表達(dá)方式。
下面給出一些常見(jiàn)屏幕概念的對(duì)比表格
dp 與 px 的關(guān)系為：
1dp = 1(css)px = 1px * pixelRatio自適應(yīng)布局方案
自適應(yīng)布局方案采用了，將 UI 等比放大到 app 上的自適應(yīng)布局。
UI 給默認(rèn) 640 的圖，采用 pxToDp 函數(shù)，即可將 UI 等比放大到 Android 機(jī)器上。
import {Dimensions} from "react-native";
// 58 app 只有豎屏模式，所以可以只獲取一次 width
const deviceWidthDp = Dimensions.get("window").width;
// UI 默認(rèn)給圖是 640
const uiWidthPx = 640;
function pxToDp(uiElementPx) {
return uiElementPx * deviceWidthDp / uiWidthPx;
}
export default pxToDp;
調(diào)用方法
import pxToDp from "./pxToDp"; ......
如果 UI 圖默認(rèn)不是 640 寬，可以通過(guò) PS 設(shè)置為 640 寬。
參考鏈接：
RN官網(wǎng) http://facebook.github.io/react-native/docs/pixelratio.html#content
px、dp、sp對(duì)比 http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-on-android/2025541#2025541
Android 布局方案（Google）https://www.google.com/design/spec/layout/units-measurements.html#units-measurements-density-independent-pixels-dp-
Android 布局方案（趙凱強(qiáng)）http://blog.csdn.net/zhaokaiqiang1992/article/details/45419023
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79136.html
摘要：使用移動(dòng)設(shè)備查看頁(yè)面時(shí)會(huì)發(fā)現(xiàn)，在微信瀏覽器中有頂部導(dǎo)航欄有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。移動(dòng)端實(shí)踐前端掘金說(shuō)起，相信大家并不陌生。 Sticky Footer，完美的絕對(duì)底部 - 前端 - 掘金寫(xiě)在前面 做過(guò)網(wǎng)頁(yè)開(kāi)發(fā)的同學(xué)想必都遇到過(guò)這樣尷尬的排版問(wèn)題：在主體內(nèi)容不足夠多或者未完全加載出來(lái)之前，就會(huì)導(dǎo)致出現(xiàn)（圖一）的這種情況，原因是因?yàn)?..
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...
摘要：但是，從字體上來(lái)說(shuō)雪碧圖制作，使用以及相關(guān)，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標(biāo)準(zhǔn)布局的情況下，回滾到舊版本的，保證移動(dòng)設(shè)備中能呈現(xiàn)出一樣的布局效果。我不想陷入和的紛爭(zhēng)，但是有一件事是確定的極大的提升了移動(dòng)端 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 ...
摘要：表示在上的對(duì)齊方式，基于的頂部基于的底部基于的中部布滿整個(gè)。的屬性所占的比例大小。它允許項(xiàng)目中當(dāng)個(gè)和其他不一樣的對(duì)齊方式，會(huì)覆蓋的屬性。 React-Native 樣式的使用。 React-Native 編寫(xiě)的應(yīng)用的樣式不是靠css來(lái)實(shí)現(xiàn)的，而是依賴javascript來(lái)為你的應(yīng)用來(lái)添加樣式，先不討論這樣做的好處與壞處，因?yàn)檫@個(gè)實(shí)現(xiàn)方法本身就存在著很多爭(zhēng)議，我們主要關(guān)注他的樣式的語(yǔ)法和...
閱讀 3398·2021-10-14 09:42
閱讀 3630·2019-08-26 13:56
閱讀 3699·2019-08-26 11:59
閱讀 1006·2019-08-23 18:00
閱讀 2295·2019-08-23 17:51
閱讀 3617·2019-08-23 17:17
閱讀 1542·2019-08-23 15:11
閱讀 5475·2019-08-23 15:05
