1、做手機網頁要考慮哪幾種尺寸呀
1、如果是比較復雜的頁面,我們只需要第一屏撐滿全屏,可以使用此方法。單獨定義html和body的樣式。【html,body{width:100%;height:100%;}】。
2、然後給DIV添加嵌套樣式【.bg{width: 100%;height: 100%;background: #ff0000;}】並在DIV中引入bgCSS【<div class="bg"></div>】保存頁面後可以看到此時div也撐滿屏幕了。
3、為了方便觀察,我們在添加一個不同顏色的DIV【<div class="content"></div>】並定義CSS【width: 10rem;height: 5rem;background: #ffea00;】。保存後網上滑屏,可以看到後添加的DIV也可以正常顯示啦。
4、在瀏覽器開發者模式下,可以切換手機的型號,不同型號手機屏幕比例是不一樣的哦,可以看到,從普通的16:9的屏幕切換到iphone7時,屏幕雖然變長了,但是下面的黃色div是不會顯示出來的。
5、切換到最新的全面屏iphoneX時,依然是紅色的div撐滿全屏的。
6、上滑屏幕後才會看到下面的其他div模塊,這樣就可以實現想要的效果了。
2、做移動端的設計 以什麼尺寸來設計
IOS篇
1、尺寸及解析度
iPhone 界面尺寸:320x480、640x960、640x1136
iPad 界面尺寸:1024x768、2048x1536
(以上單位都是像素哦,至於解析度一般網頁UI和移動UI基本上都只要 72 ppi)
當然,在設計的時候並不是每個尺寸都要做一套,尺寸按自己的手機尺寸來設計,比較方便預覽效果,一般用 640x960 或者 640x1136 的尺寸設計。
P.S. 作圖的時候確保都是用形狀工具(快捷鍵:U)畫的,這樣更方便後期的切圖或尺寸變更~
2、界面基本組成元素
iPhone的APP界面一般由四個元素組成,分別是:狀態欄、導航欄、主菜單欄以及中間的內容區域
這里取用 640x960 的尺寸設計,那我們就說說在這個尺寸下這些元素的尺寸:
狀態欄:就是我們經常說的信號、運營商、電量等顯示手機狀態的區域,其高度為:40 px
導航欄:顯示當前界面的名稱,包含相應的功能或者頁面間跳轉的按鈕,其高度為:88 px
主菜單欄:類似於頁面的主菜單,提供整個應用的分類內容的快速跳轉,其高度為:98 px
內容區域:展示應用提供的相應內容,整個應用中布局變更最為頻繁的,其高度為:734 px
iPhone/iPod Touch
第一代、第二代、第三代
iPhone4/iPhone4s
iPhone5/iPhone5C/iPhone5s
至於我們經常說的 iPhone5/5s 的 640x11136 的尺寸,其實就是中間的內容區域高度增加到:910 px
P.S. 在最新的 iOS7 的風格中,蘋果已經開始慢慢弱化狀態欄的存在,將狀態欄和導航欄合在了一起,但是再怎麼變化,尺寸高度也還是沒有變化的,只不過大家再設計 iOS7 風格的界面的時候多多注意一下~
3、字體大小
iPhone 上的字體英文為: HelveticaNeue 至於中文,Mac下用的是黑體-簡,Win下則為華文黑體。
下圖是百度用戶體驗做過的一個小調查,可以看出用戶可接受的文字大小,像素為單位,也就是大家在PS里的文字像素大小。
P.S. 多留心下一些大公司的數據研究,你會發現很多你根本沒考慮到的問題
Android篇
1、尺寸及解析度
Android 界面尺寸:480x800、720x1280、1080x1920... (單位:像素)
Android 比 iPhone 的尺寸多了很多套,建議取用 720x1280 這個尺寸,這個尺寸 720x1280中顯示完美,在 1080x1920 中看起來也比較清晰;切圖後的圖片文件大小也適中,應用的內存消耗也不會過高。
3、手機端網頁設計尺寸多少
iPhone手機網頁的設計尺寸
iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI
安卓網頁的設計尺寸
320dp:一個普通的手機屏幕(240X320,320×480,480X800)
480dp:一個中間平板電腦像(480×800)
600dp:7寸平板電腦(600×1024)
720dp:10寸平板電腦(720×1280,800×1280)
ipad網頁的設計尺寸
iPad第三代第四代尺寸是2048x1536px解析度是264PPI
iPad第一代第二代尺寸是1024x768px解析度是132PPI
iPad Mini尺寸是1024x768px解析度是163PPI
4、移動端中的設計尺寸標准尺寸是多少
說的是APP的設計標准么?iphone6的尺寸是750X1334px的,安卓手機的話,因為品牌比較多,設計規范也沒專有具體的定義屬,只要符合審美美觀就好,ios設計標准還是比較嚴格的,包括狀態欄40px和導航欄88px,標簽欄98px等都是有嚴格要求的
5、HTML5移動網頁的設計稿尺寸應該是多少
HTML5的移動端網頁設計稿,通常情況下,內容區為750px或960px或者1080px的,一般不小於750px像素大小(寬度)
設計稿可以比750px大,但是絕對不能比750px小,這個主要是由於當前手機的解析度相對較高(iPhone 6是375物理像素,但實際像素為其兩倍,也就是750,這個750就是這么來的)
如果設計圖稿過小,前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清,所以這也是為何要「大」解析度
此外需要注意的是,要保證頁面的基準字體大小,在320px的設計稿當中,最小字體不宜小於12像素,其他像素的設計稿當中,等比例換算即可(12/320px*設計稿像素值)
6、移動端web在設計時寬度尺寸是多少合適?
首先說現象,大家都知道移動端設備屏幕尺寸非常多,碎片化嚴重。尤其是Android,你會聽到很多種解析度:480x800, 480x854, 540x960, 720x1280, 1080x1920,而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了:640x960, 640x1136, 750x1334, 1242x2208。
不要被這些尺寸嚇倒。實際上大部分的app和移動端網頁,在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法,而且有規律可循。
像素密度
要知道,屏幕是由很多像素點組成的。之前提到那麼多種解析度,都是手機屏幕的實際像素尺寸。比如480x800的屏幕,就是由800行、480列的像素點組成的。每個點發出不同顏色的光,構成我們所看到的畫面。而手機屏幕的物理尺寸,和像素尺寸是不成比例的。最典型的例子,iPhone 3gs的屏幕像素是320x480,iPhone 4s的屏幕像素是640x960。剛好兩倍,然而兩款手機都是3.5英寸的。
7、移動端web在設計時寬度尺寸是多少合適
基本上都是640吧,高度由於是專題,可以不受限制的
8、現在手機移動端的設計尺寸是多少
普遍5吋左右
9、移動端美工畫布設計尺寸多少合適
網頁尺寸:
淘寶是990(950)寬*任意高,要是自己或者企業的話,這個你隨便定,一般寬度是在950-1200之間
手機尺寸:
淘寶620(480)寬*任意高,要是自己或者用其他軟體的話請參考軟體的要求。