一般ui切圖都會根據指定的螢幕大小和螢幕密度來設計,我們這個專案以iphone 6(750*1334 單位px,畫素密度2)為準;
一般裝置畫素密度:
裝置的畫素密度,例如:
pixelratio.get() === 1 mdpi android 裝置 (160 dpi)
pixelratio.get() === 1.5 hdpi android 裝置 (240 dpi)
pixelratio.get() === 2 iphone 4, 4s,iphone 5, 5c, 5s,iphone 6,xhdpi android 裝置 (320 dpi)
pixelratio.get() === 3 iphone 6 plus , xxhdpi android 裝置 (480 dpi)
pixelratio.get() === 3.5 nexus 6
螢幕資訊(rn預設單位是dp):
import from
'react-native';
export const devicewidth = dimensions.get('window').width; //裝置的寬度,單位dp
export const deviceheight = dimensions.get('window').height; //裝置的高度,單位dp
let fontscale = pixelratio.getfontscale(); //返回字型大小縮放比例
let pixelratio = pixelratio.get(); //當前裝置的畫素密度
const defaultpixel = 2; //iphone6的畫素密度(iphone6 pixelratio=2)
px :是螢幕的畫素點
dp :乙個基於density的抽象單位,如果乙個160dpi的螢幕,1dp=1px
ppi :每英吋單位長度的畫素個數,既 px/英吋,ppi = √(長度畫素數² + 寬度畫素數²) / 螢幕對角線英吋數
畫素密度:ppi/160
dp和px的換算公式 :
dp*ppi/160 = px。
比如1dp x 320ppi/160 = 2px。
因為設計稿給的單位是px,而rn預設的單位是dp,所以我們的目的是把px轉化為dp(rn輸入的是dp)
const width6 = 750/defaultpixel;//iphone6 螢幕寬度 dp
const height6 = 1334/defaultpixel;//iphone6 螢幕高度 dp
const scale = math.min(deviceheight / height6, devicewidth / width6); //獲取縮放比例
/** * 螢幕適配,縮放size
*@param size
*@returns
*/export function scalesize(size: number)
/** * 設定字型的size(單位px)
*@param size 傳入設計稿上的px
*@returns 返回實際sp
*/export function setsptext(size: number)
寫的還不完善 後續會修改。 關於 r n和 r n的區別
什麼是回車,什麼是換行?在計算機還沒有出現之前,有一種叫做電傳打字機 teletype model 33,linux unix下的tty概念也來自於此 的玩意,每秒鐘可以打10個字元。但是它有乙個問題,就是打完一行換行的時候,要用去0.2秒,正好可以打兩個字元。要是在這0.2秒裡面,又有新的字元傳過...
JQuery處理元素尺寸和瀏覽器視窗尺寸
栗子1 顯示 div 元素的尺寸 width 返回元素的寬度 height 返回元素的高度 栗子2 js 下面js想新增對話方塊的定位,要求對話方塊顯示在決策報表全屏展示時的最下方,是挨著最下方,請高手幫忙指點 var url webreport reportserver?reportlet 1.c...
r, n與 r n有什麼區別
n是換行,英文是new line r是回車,英文是carriage return 機械打字機有回車和換行兩個鍵作用分別是 換行就是把滾筒卷一格,不改變水平位置。回車就是把水平位置復位,不捲動滾筒。enter 回車 換行 r n 注 r n連用時,不能調換順序 unix換行 n 0x0a mac回車 ...