手機(jī)網(wǎng)站設(shè)計(jì)尺寸及界面布局

隨著手機(jī)網(wǎng)民的巨曾以及各個(gè)手機(jī)應(yīng)用平臺(tái)的上線，幾乎所有的互聯(lián)網(wǎng)應(yīng)用都紛紛往手機(jī)平臺(tái)上遷移。但是當(dāng)前的手機(jī)種類繁多，手機(jī)屏幕的大小、分辨率各異，因此既要考慮應(yīng)用在不同屏幕大小上的兼容，又要保持其一致性，那么手機(jī)網(wǎng)站設(shè)計(jì)尺寸及界面布局是怎么樣滿足這一要求的呢?很多人不是很清楚下面小編給大家介紹一下：

在客戶端的設(shè)計(jì)過(guò)程中，針對(duì)不同的屏幕大小，應(yīng)該如何來(lái)設(shè)計(jì)?是否每個(gè)大小的屏幕尺寸都需要一個(gè)新的界面布局，

一.屏幕大小正確理解

說(shuō)起屏幕大小的時(shí)候，會(huì)有兩種表達(dá)方式，1) 我的屏幕2.4寸，你的屏幕3.5寸，2)這個(gè)屏幕分辨率 240*320，那個(gè)屏幕分辨率為320*480。但在設(shè)計(jì)過(guò)程中，屏幕的分辨率和屏幕的實(shí)際尺寸必須同時(shí)考慮，屏幕物理尺寸：屏幕對(duì)角線長(zhǎng)的實(shí)際尺寸，如2.4寸，3.5寸等等;屏幕分辨率：屏幕所能顯示像素的多少。物理尺寸決定了屏幕的實(shí)際尺寸，而分辨率可以表示屏幕上可以呈現(xiàn)的像素點(diǎn)數(shù)，屏幕密度決定了屏幕的精細(xì)程度。相同的屏幕大小，如果分辨率高，則屏幕元素更精細(xì)。一個(gè)界面元素在屏幕里的實(shí)際尺寸卻是與屏幕密度相關(guān)，屏幕密度較小的屏上，界面元素的實(shí)際尺寸就會(huì)大些。

二.設(shè)計(jì)過(guò)程與屏幕適配思路

確定目標(biāo)的屏幕大小，屏幕大小由寬度和高度兩個(gè)因素決定，但是在布局手機(jī)客戶端的過(guò)程中，最關(guān)心的是寬度值。寬度確定后，高度可以由滾動(dòng)或者翻頁(yè)來(lái)顯示所有內(nèi)容;文字可以在適當(dāng)?shù)奈恢谜坌?標(biāo)題欄可以伸縮適配屏幕寬度等等。但并不是不考慮高度，圖標(biāo)、文字、特殊的組件不僅需要考慮寬度，也需要考慮整個(gè)屏幕的布局是否與之適配。

由于手機(jī)系統(tǒng)各異，手機(jī)的屏幕尺寸五花八門，屏幕的性能也呈現(xiàn)多樣性，還有觸摸屏和非觸屏的區(qū)分，這四個(gè)變量結(jié)合起來(lái)，會(huì)有無(wú)數(shù)種不同的情況，如何能使你的應(yīng)用完美地展現(xiàn)給用戶，適配固然很重要，但是更重要的是你要在適配之前，確定應(yīng)用的目標(biāo)群體也很重要啦，一定要選擇適合自己的。