設(shè)計(jì)稿
- 設(shè)計(jì)按照iPhone6(750*1334)的尺寸淘钟，做了一張?jiān)O(shè)計(jì)稿寸认。
- 一套3x圖
-
Android和Ios兩端適配
設(shè)計(jì)稿
問(wèn)題來(lái)了：
一張98*193的圖片恍风，我們應(yīng)該怎樣寫(xiě)呢沟堡？
場(chǎng)景一：寬度直接寫(xiě)98(Flutter的單位都是dp)
華為榮耀V8測(cè)試機(jī)
width: 360dp 1080px
height: 740.67dp 2222px
pixel density: 3.0 屏幕密度比
98在設(shè)計(jì)稿上表示的是px驻售，但是我們?cè)谑褂肍lutter中控件的時(shí)候熟菲，單位是dp看政，所以必須要將設(shè)計(jì)稿上98轉(zhuǎn)換成dp朴恳。
MediaQueryData mediaQuery = MediaQuery.of(context);
_pixelRatio = mediaQuery.devicePixelRatio;
_pixel就是手機(jī)的屏幕密度比，在V8上是3.0允蚣。
直接寫(xiě)出現(xiàn)的問(wèn)題：
Image.asset(width:98,height:103)
那么最終顯示在V8手機(jī)上的寬高就是98x3=294px和103x3=309px于颖。
這么寫(xiě)我們就是把98和103當(dāng)做了dp，但是設(shè)計(jì)師給的是px單位啊嚷兔，所以肯定是錯(cuò)誤的森渐，怎么解決？
這里我們要將設(shè)計(jì)稿上的px單位冒晰，轉(zhuǎn)換成代碼中的dp單位章母。
dp=px/pixel;
98px=98/3=32.67dp
假如我現(xiàn)在寫(xiě)(98/3)dp，那么在V8上也是98px了翩剪。
問(wèn)題又來(lái)了乳怎，V8的物理寬度是1080，而設(shè)計(jì)稿的物理寬度是750前弯，也就是說(shuō)蚪缀，設(shè)計(jì)稿(750*1334)上的98px肯定不應(yīng)該等于V8(1080x2222)上的144px,而應(yīng)該是
98x1080/750=141.12px
那么一個(gè)在iPhone6上的98x103的長(zhǎng)方形，在V8上的實(shí)際尺寸應(yīng)該是：
width: 98x1080/750=141.12
height: 103x2222/1334=171.56
這就完了嗎恕出？
假設(shè)設(shè)計(jì)稿上有一個(gè)正方形98x98,在V8上的實(shí)際尺寸應(yīng)該是：
width: 98x1080/750=141.12
height: 98x2222/1334=163.23
我尼瑪询枚，這是什么鬼？
問(wèn)題就在于浙巫，手機(jī)之間的density可能是一樣的金蜀，但是實(shí)際的屋里尺寸卻不是成比例的。
在這里的體現(xiàn)就是iPhone6(750*1335)和V8(1080 *2222)的物理寬高并不是同比例的的畴。
正方形的解決方法:
對(duì)于正方形控件渊抄，在計(jì)算的時(shí)候以寬度為標(biāo)準(zhǔn)，在視覺(jué)上可以實(shí)現(xiàn)效果,在實(shí)際的尺寸上丧裁，高度可能偏低护桦。
