現(xiàn)在做mobile web端，由于有許多的屏幕需要適配傻粘，所以UX在和dev溝通的時候每窖，就會存在一些疑惑
UX給dev設(shè)計圖上怎么標(biāo)注？
怎么進(jìn)行不同屏幕間的適配呢弦悉？
先回答問題
1：設(shè)計圖上寫px窒典。
2：關(guān)于適配UX只需要關(guān)心表現(xiàn)就行了，怎么實現(xiàn)是dev要解決稽莉。適配就是根據(jù)一定的規(guī)則進(jìn)行放大縮小瀑志。這個規(guī)則需要dev想出來，提供給UX污秆，讓UX做判斷看是否可行后室。
原因是dev一般完成開發(fā)分兩步，第一步在標(biāo)準(zhǔn)尺寸（iPhone6S）上忠實的還原UX的設(shè)計混狠，第二步是進(jìn)行適配岸霹。
用那個button舉個例子，
第一步 忠實還原UX的設(shè)計
dev拿到設(shè)計稿發(fā)現(xiàn)button的寬高為320*60px将饺。這時候dev就會在代碼中寫到 width:320px,height:60px贡避⊥蠢瑁看了下標(biāo)準(zhǔn)屏幕的表現(xiàn)是正確的。然后就到了屏幕適配
第二步 進(jìn)行適配
要適配不同尺寸的屏幕刮吧，這時候只需要一個y=kx（數(shù)學(xué)公式??）線性變換就好了湖饱。
就是寫成 width:(320乘X)px,height:(60乘X)px。在不同屏幕尺寸中X是一個不同的值杀捻。好比在基準(zhǔn)屏幕iPhone6S中X就是1,所以結(jié)果還是 width:320px,height:60px井厌。而在iPhone6上x是0.9 則結(jié)果就是width:(320乘0.9)px,height:(60乘0.9)px
Y=kX,Y是結(jié)果，系數(shù)是K致讥，X是設(shè)計圖的尺寸
| 手機(jī) | 屏幕大小 | 系數(shù)X | button寬度 | button高度 |
|---|---|---|---|---|
| iPhone6S | 736*414 | 1 | （320*1）px | (60*1)px |
| iPhone6 | 667*375 | 0.9 | （320*0.9）px | (60*0.9)px |
| iPhone5 | 568*320 | 0.8 | （320*0.8）px | (60*0.8)px |
所以這樣只需要UX給出一個標(biāo)準(zhǔn)屏幕尺寸的設(shè)計仅仆，和一個不同屏幕的系數(shù)X的值就行了。
系數(shù)X也不用像上面的例子一樣垢袱，給每個屏幕一個具體的值墓拜，也可以是一個規(guī)則，比如X=當(dāng)前屏幕的寬度/標(biāo)準(zhǔn)屏幕的寬度请契。上面的表格就變成了
Y=kX,Y是結(jié)果咳榜，系數(shù)是K，X是設(shè)計圖的尺寸
X=當(dāng)前屏幕的寬度/標(biāo)準(zhǔn)屏幕的寬度
| 手機(jī) | 屏幕大小 | 系數(shù)X | button寬度 | button高度 |
|---|---|---|---|---|
| iPhone6S | 736*414 | 414/414 | （320* 414/414）px | (60* 414/414)px |
| iPhone6 | 667*375 | 375/414 | （320* 375/414）px | (60* 375/414)px |
| iPhone5 | 568*320 | 320/414 | （320* 320/414）px | (60 * 320/414)px |
綜上爽锥，UX只需要給一個標(biāo)準(zhǔn)屏幕上的px(寬320px)尺寸涌韩，和一個不同尺寸的適配規(guī)則（比如: UX說:根據(jù)屏幕寬度進(jìn)行等比縮放。dev就會實現(xiàn)成320 * 當(dāng)前屏幕寬度/標(biāo)準(zhǔn)屏幕寬度）就好了氯夷。
上面說的都是不同屏幕的距離的的適配臣樱，還有字體的適配。字體的適配也可以用上面的那種方式來做肠槽，或者一種比較簡單的做法擎淤，就是一個屏幕區(qū)間設(shè)一個字體大小好比 寬度在400-440px的奢啥，用28號字體秸仙，寬度在350-400的用24號字體。
關(guān)于適配規(guī)則桩盲，UX可以找dev商量寂纪，看他有什么可以提供的實現(xiàn)，這種實現(xiàn)在不同屏幕上會如何表現(xiàn)赌结，需要UX提供什么支持捞蛋。
然互UX根據(jù)dev描述的各種表現(xiàn)，選取其中一種就行了
