现在做mobile web端，由于有许多的屏幕需要适配，所以UX在和dev沟通的时候，就会存在一些疑惑
UX给dev设计图上怎么标注？
怎么进行不同屏幕间的适配呢？
Paste_Image.png
Paste_Image.png
先回答问题
1：设计图上写px。
2：关于适配UX只需要关心表现就行了，怎么实现是dev要解决。适配就是根据一定的规则进行放大缩小。这个规则需要dev想出来，提供给UX，让UX做判断看是否可行。
原因是dev一般完成开发分两步，第一步在标准尺寸（iPhone6S）上忠实的还原UX的设计，第二步是进行适配。
用那个button举个例子，
第一步 忠实还原UX的设计
dev拿到设计稿发现button的宽高为320*60px。这时候dev就会在代码中写到 width:320px,height:60px。看了下标准屏幕的表现是正确的。然后就到了屏幕适配
第二步 进行适配
要适配不同尺寸的屏幕，这时候只需要一个y=kx（数学公式😂）线性变换就好了。
就是写成 width:(320乘X)px,height:(60乘X)px。在不同屏幕尺寸中X是一个不同的值。好比在基准屏幕iPhone6S中X就是1,所以结果还是 width:320px,height:60px。而在iPhone6上x是0.9 则结果就是width:(320乘0.9)px,height:(60乘0.9)px
Y=kX,Y是结果，系数是K，X是设计图的尺寸
| 手机 | 屏幕大小 | 系数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给出一个标准屏幕尺寸的设计，和一个不同屏幕的系数X的值就行了。
系数X也不用像上面的例子一样，给每个屏幕一个具体的值，也可以是一个规则，比如X=当前屏幕的宽度/标准屏幕的宽度。上面的表格就变成了
Y=kX,Y是结果，系数是K，X是设计图的尺寸
X=当前屏幕的宽度/标准屏幕的宽度
| 手机 | 屏幕大小 | 系数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只需要给一个标准屏幕上的px(宽320px)尺寸，和一个不同尺寸的适配规则（比如: UX说:根据屏幕宽度进行等比缩放。dev就会实现成320 * 当前屏幕宽度/标准屏幕宽度）就好了。
上面说的都是不同屏幕的距离的的适配，还有字体的适配。字体的适配也可以用上面的那种方式来做，或者一种比较简单的做法，就是一个屏幕区间设一个字体大小好比 宽度在400-440px的，用28号字体，宽度在350-400的用24号字体。
关于适配规则，UX可以找dev商量，看他有什么可以提供的实现，这种实现在不同屏幕上会如何表现，需要UX提供什么支持。
然互UX根据dev描述的各种表现，选取其中一种就行了
网友评论