tft每日頭條

 > 生活

 > ui界面設計邊距和間距

ui界面設計邊距和間距

生活 更新时间:2024-08-08 14:52:47

ui界面設計邊距和間距(從程序員的角度看ui出圖尺寸)1

各個安卓手機和蘋果手機的物理尺寸都不一樣:

譬如蘋果X:414*896

蘋果SE: 375*667

安卓手機像素就更多了,三星小米等等,物理像素都是不一樣的

那麼ui出圖的時候,是不是每款手機都要有對應的像素呢?

那肯定是不用的,正常來說,針對微信小程序開發的ui,寬度750像素即可

對應h5和app開發的,寬度為1080像素

至于高度,跟寬度保存16:9,内容不能撐滿整個屏幕,就做整個尺寸

/**

* 1080尺寸轉px

* @param {Number} no

*/

export const calculatedSize = no => {

let rem = window['lib']['flexible'].rem;

let rootValue = 108;

no = Number(no);

return no > 2 ? (rem / rootValue * no).toFixed(2) : no;

}

/**

* 1080尺寸轉rem

* @param {Number} no

*/

export const px2rem = no => {

let rem = window['lib']['flexible'].rem;

let rootValue = 108;

no = Number(no);

return window['lib']['flexible'].px2rem(no > 2 ? (rem / rootValue * no) : no)

};

為了湊個字數,我把代碼貼出來了,當然,我知道也沒有人會看,隻是為了證明,你隻管出1080px的圖,剩下的交給前端。

現在産品用來做交互的墨刀軟件也可以出ui,不需要前端自己裁圖,非常方便,感興趣的要學習一下哦,logo貼在下面

ui界面設計邊距和間距(從程序員的角度看ui出圖尺寸)2

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved