×

移動端頁面尺寸設(shè)計考慮的因素有哪些

  • 作者:新網(wǎng)
  • 來源:新網(wǎng)
  • 瀏覽:100
  • 2018-03-03 16:09:22

移動端頁面尺寸設(shè)計考慮的因素有哪些?現(xiàn)在我們經(jīng)??吹降碾娚叹W(wǎng)站的手機頁面大都是直接按照移動端頁面尺寸設(shè)計的,那么你知道移動端頁面尺寸設(shè)計考慮的因素有哪些嗎?小編就來與大家聊一聊這個問題。

移動端頁面尺寸設(shè)計考慮的因素有哪些?現(xiàn)在我們經(jīng)??吹降?a href="/tag/36371" target="blank">電商網(wǎng)站的手機頁面大都是直接按照移動端頁面尺寸設(shè)計的,那么你知道移動端頁面尺寸設(shè)計考慮的因素有哪些嗎?小編就來與大家聊一聊這個問題。
 

22c6000402bba5ff1692.gif

可以通過這個測試頁面 https://greenzorro.github.io/demo/basic/響應(yīng)式斷點.html 來看看你的移動設(shè)備屏幕寬度,這是邏輯像素寬度。
以iPhone 5s為例,屏幕的分辨率是640x1136,倍率是2。瀏覽器會認為屏幕的分辨率是320x568,仍然是基準倍率的尺寸。所以在制作頁面時,只需要按照基準倍率來就行了。無論什么樣的屏幕,倍率是多少,都按邏輯像素尺寸來設(shè)計和開發(fā)頁面。只不過在準備資源圖的時候,需要準備2倍大小的圖,通過代碼把它縮成1倍大小顯示,才能保證清晰。
實際應(yīng)用
大家最關(guān)心的還是實際運用,畫布該怎么設(shè)置。我們就iOS、Android、Web三個平臺來分別梳理一下。不過在這之前,我要為使用PS進行設(shè)計的朋友介紹一個小技巧。
之前我說過,我們要以邏輯像素尺寸來思考界面。體現(xiàn)到設(shè)計過程中,就是要把單位設(shè)置成邏輯像素。打開PS的首選項——單位與標尺界面,把尺寸和文字單位都改成點(Point)。這里的點也就是pt,無論設(shè)計iOS、Android還是Web應(yīng)用,單位都用它。當然,各平臺單位名稱還是要記住的。這里我們用的只是它的原理,不用在意名稱。
要調(diào)節(jié)倍率,則通過圖像大小里的DPI來控制。這個DPI,其實就是PPI,像素密度。有個常識大家都知道,屏幕上的設(shè)計DPI設(shè)成72,印刷品設(shè)計DPI設(shè)成300。
移動端頁面尺寸設(shè)計考慮的因素有哪些?以上文章就是小編為大家?guī)淼年P(guān)于移動端頁面尺寸設(shè)計考慮的因素有哪些的全部文字介紹了,希望對你有所幫助。
 

免責聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻自行上傳,本網(wǎng)站不擁有所有權(quán),也不承認相關(guān)法律責任。如果您發(fā)現(xiàn)本社區(qū)中有涉嫌抄襲的內(nèi)容,請發(fā)送郵件至:operations@xinnet.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,本站將立刻刪除涉嫌侵權(quán)內(nèi)容。

免費咨詢獲取折扣

Loading