資訊專欄INFORMATION COLUMN
摘要：方式，是用于把默認以單位長度，轉化為對應的數值。屏幕的單位和概念對比在中，等于，表示像素密度。下面給出一些常見屏幕概念的對比表格與的關系為自適應布局方案自適應布局方案采用了，將等比放大到上的自適應布局。
默認單位 dp
設置默認寬高的時，是不需要帶單位的，如下所示：
那么，布局的默認單位是什么？在官方文檔中有一段關于布局單位的描述。
static getPixelSizeForLayoutSize(layoutSize: number) Converts a layout size (dp) to pixel size (px). Guaranteed to return an integer number.
getPixelSizeForLayoutSize 方式，是用于把默認以 dp 單位長度，轉化為對應的 px 數值。那么很明顯， 默認的布局單位是 dp。
1dp = 1(css)pxdp 到底是個什么樣單位？
關于 dp 官網給了我一個定義：
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 有一個關于 (160/screen density) 的正相關的關系：
1dp = 1物理px （screen density = 160） 1dp = 2物理px （screen density = 320） 1dp = 3物理px （screen density = 480）
同理在 H5 頁面，以下等式是成立的。
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）
而實際上 (160/screen density) 就是 pixelRatio，也就是就是寫 H5 頁面時，像素比率 window.devicePixelRatio。
也就是說，1dp = 1(css)px。
屏幕的單位和概念對比在 Android 中，screen density 等于 DPI，表示像素密度。
在 google 布局單位文檔中，關于 screen density 有過這樣的描述，
dpi 有過這樣的描述
其中 240/160 兩列，像素比同為1.5，可證明 screen density 和 dpi概念一樣，只是換了個表達方式。
下面給出一些常見屏幕概念的對比表格
dp 與 px 的關系為：
1dp = 1(css)px = 1px * pixelRatio自適應布局方案
自適應布局方案采用了，將 UI 等比放大到 app 上的自適應布局。
UI 給默認 640 的圖，采用 pxToDp 函數，即可將 UI 等比放大到 Android 機器上。
import {Dimensions} from "react-native";
// 58 app 只有豎屏模式，所以可以只獲取一次 width
const deviceWidthDp = Dimensions.get("window").width;
// UI 默認給圖是 640
const uiWidthPx = 640;
function pxToDp(uiElementPx) {
return uiElementPx * deviceWidthDp / uiWidthPx;
}
export default pxToDp;
調用方法
import pxToDp from "./pxToDp"; ......
如果 UI 圖默認不是 640 寬，可以通過 PS 設置為 640 寬。
參考鏈接：
RN官網 http://facebook.github.io/react-native/docs/pixelratio.html#content
px、dp、sp對比 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 布局方案（趙凱強）http://blog.csdn.net/zhaokaiqiang1992/article/details/45419023
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79136.html
摘要：使用移動設備查看頁面時會發現，在微信瀏覽器中有頂部導航欄有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。移動端實踐前端掘金說起，相信大家并不陌生。 Sticky Footer，完美的絕對底部 - 前端 - 掘金寫在前面 做過網頁開發的同學想必都遇到過這樣尷尬的排版問題：在主體內容不足夠多或者未完全加載出來之前，就會導致出現（圖一）的這種情況，原因是因為...
摘要：表示在上的對齊方式，基于的頂部基于的底部基于的中部布滿整個。的屬性所占的比例大小。它允許項目中當個和其他不一樣的對齊方式，會覆蓋的屬性。 React-Native 樣式的使用。 React-Native 編寫的應用的樣式不是靠css來實現的，而是依賴javascript來為你的應用來添加樣式，先不討論這樣做的好處與壞處，因為這個實現方法本身就存在著很多爭議，我們主要關注他的樣式的語法和...
閱讀 3175·2021-10-14 09:42
閱讀 3569·2019-08-26 13:56
閱讀 3465·2019-08-26 11:59
閱讀 943·2019-08-23 18:00
閱讀 2209·2019-08-23 17:51
閱讀 3530·2019-08-23 17:17
閱讀 1481·2019-08-23 15:11
閱讀 5177·2019-08-23 15:05
