當前位置:首頁 » 網頁前端 » 移動web設計稿尺寸
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

移動web設計稿尺寸

發布時間: 2022-08-09 12:37:48

❶ 移動端的h5頁面的尺寸是多少

近來,大尺寸手機屏幕日趨主流,意派Epub360根據對主流大屏的計算,現新增大尺寸手機屏幕的畫布,並命名為「微信Plus」。原來的普通微信尺寸將繼續保留。

內容安全區:375*603(750*1206)

出血區:422*748(844*1496)

左右邊框各:23.5px

上下邊框各:72.5px

根據該畫布,後續將會推出配套的layer組件等尺寸,即當選擇使用該微信尺寸時,layer畫布跟layer容器尺寸自動默認尺寸:375X603PX,方便調整。

❷ 現在的網頁設計默認的尺寸做多大的

網頁設計合適尺寸,已經有了很大改變,不需要擔心設備尺寸不同的問題,以目前主流形式來看,有以下:

1、pc端網頁的設計稿尺寸是寬度1920px,高度最小是1080px , 主體內容在1200px內就行,比較規范。

2、移動端網頁的設計尺寸可以考慮680px和720px

❸ 5移動網頁的設計稿尺寸應該是多少

一般而言H5移動設計稿為10rem,然後具體是寬約400像素px,高768像素px,平板的設計稿尺寸為768*1024的大小

❹ Web 頁面採用多大的寬度最合適

網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計.

網頁的尺寸受限於兩個因素:一個是顯示器屏幕.顯示器現在種類很多,以17寸為主流, 正在朝19寸及寬屏的方向發展.但目前也有為數不少的15寸顯示器.另一個是瀏覽器軟體,就是我們常用的IE,遨遊,Friefox等.

高度:

高度是可以向下延展的,所以一般對高度不限制. 對於一屏來說,一般沒有一個固定值,因為每個人的瀏覽器的工具欄不同,我見過有的瀏覽器工具欄被插件佔了半個屏幕,所以高度沒有確切值。

寬度:

1、在IE6.0下,寬度為顯示器解析度減21,比如1024的寬度-21就變成1003。但值得注意的是IE6.0(或更低)無論你的網頁多高都會有右側的滾動條框。

2、在Firefox下,寬度的分率辨減19。比如1024的寬度-19就變成1005

3、在Opear下,寬度的分率辨減23。比如1024的寬度-23就變成1001

註:Firefox或Opear在內容少於瀏覽器高度時不顯示右側滾動條。

所以如果是1024的解析度,你的網頁不如設成1000安全一點。設成900兩側空白更大,視覺上更舒服一點.也方便做一些浮動層的設計.

如果是800的解析度一般都設成770。但也有設成760的.

這些需要明白並且牢記,不然很可能做出來不符合瀏覽器要求,不過一般我們都回設定的再稍微小一點,應為有些瀏覽器加了插件或者其他的東西寬度會有變化所以 800的解析度一般設定760左右,1024的設定990左右.

網頁設計標准尺寸:

1、800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。

2、1024*768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612-615之間.就不會出現水平滾動條和垂直滾動條。

3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右

4、在PS里做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色范圍很廣,所以自然會有失色的現象.

頁面標准按800*600解析度製作,實際尺寸為778*434px

頁面長度原則上不超過3屏,寬度不超過1屏

每個標准頁面為A4幅面大小,即8.5X11英寸

全尺寸banner為468*60px,半尺寸banner為234*60px,小banner為88*31px

另外120*90,120*60也是小圖標的標准尺寸

每個非首頁靜態頁面含圖片位元組不超過60K,全尺寸banner不超過14K

標准網頁廣告尺寸規格

一、120*120,這種廣告規格適用於產品或新聞照片展示。

二、120*60,這種廣告規格主要用於做LOGO使用。

三、120*90,主要應用於產品演示或大型LOGO。

四、125*125,這種規格適於表現照片效果的圖像廣告。

五、234*60,這種規格適用於框架或左右形式主頁的廣告鏈接。

六、392*72,主要用於有較多圖片展示的廣告條,用於頁眉或頁腳。

七、468*60,應用最為廣泛的廣告條尺寸,用於頁眉或頁腳。

八、88*31,主要用於網頁鏈接,或網站小型LOGO。

廣告形式 像素大小 最大尺寸 備注

BUTTON 120*60(必須用gif) 7K

215*50(必須用gif) 7K

通欄 760*100 25K 靜態圖片或減少運動效果

430*50 15K

超級通欄 760*100 to 760*200 共40K 靜態圖片或減少運動效果

巨幅廣告 336*280 35K

585*120

豎邊廣告 130*300 25K

全屏廣告 800*600 40K 必須為靜態圖片,FLASH格式

圖文混排 各頻道不同 15K

彈出窗口 400*300(盡量用gif) 40K

BANNER 468*60(盡量用gif) 18K

懸停按鈕 80*80(必須用gif) 7K

流媒體 300*200(可做不規則形狀但尺寸不能超過300*200) 30K 播放時間 小於5秒60幀(1秒/12幀)

網頁中的廣告尺寸

1.首頁右上,尺寸120*60

2.首頁頂部通欄,尺寸468*60

3.首頁頂部通欄,尺寸760*60

4.首頁中部通欄,尺寸580*60

5.內頁頂部通欄,尺寸468*60

6.內頁頂部通欄,尺寸760*60

7.內頁左上,尺寸150*60或300*300

8.下載地址頁面,尺寸560*60或468*60

9.內頁底部通欄,尺寸760*60

10.左漂浮,尺寸80*80或100*100

11.右漂浮,尺寸80*80或100*10

❺ 手機端網頁設計尺寸多少

iPhone手機網頁的設計尺寸

iPhone5尺寸是640x1136px解析度是326PPI
iPhone4和iPhone4S尺寸是640x960px解析度是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px解析度是163PPI

❻ 網頁設計合適的頁面尺寸是多少

網頁設計選用的解析度是72像素,使用的畫布尺寸1920px*1080px。但是並不意味著在整個畫布上進行設計,一般採用全屏展示和兩側留白的方式。
全屏展示,是整個網站看起來大氣一些,但是布局要合理安排,不然看起來有些傻大的感覺。
兩側留白是為了適配不同電腦屏幕的尺寸,能夠確保網站只是電腦站的時候一些筆記本電腦也能顯示全面網站的內容區域,內容限時區域在好控制在1000px-1200px。

❼ 移動端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英寸的。

❽ 最新網頁設計尺寸規范是什麼

網頁設計標准尺寸:800*600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。

如果是大屏幕設備,則向頁面head部分中添加BASE標記,並將後續的圖片、腳本和樣式表載入請求定向到一個虛擬路徑"/rwd-router"。

當這些請求到達伺服器端,htacces文件會決定這些請求所需要的是原始圖片還是小尺寸的"響應式圖片",並進行相應的反饋輸出。對於小屏幕的移動設備,原始尺寸的大圖片永遠不會被用到。

通過液態網格和液態圖片技術,並且在正確的地方使用了正確的HTML標記。

響應式圖片技術思想:不僅要同比的縮放圖片,還要在小設備上降低圖片自身的解析度。這個技術的實現需要使用幾個相關文件,我們可以在Github上獲取。

包括一個JavaScript文件(rwd-images.js),一個.htaccess文件,以及一些範例資源文件。大致的原理是,rwd-images.js會檢測當前設備的屏幕解析度。

❾ 移動端web在設計時寬度尺寸是多少合適

基本上都是640吧,高度由於是專題,可以不受限制的