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

前端尺寸

發布時間: 2022-01-13 07:13:33

『壹』 一般做網頁設計背景尺寸定多大

網頁的背景多大要看對網頁的要求的。

網頁設計標准尺寸:

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

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

為了做到主題鮮明突出,要點明確,應該使配色和圖片圍繞預定的主題;調動一切手段充分表現網站點的個性和情趣,辦出網站的特點。

專業的網頁設計,需要經歷以下幾個階段:

需要根據消費者的需求、市場的狀況、企業自身的情況等進行綜合分析,從而建立起營銷模型。

以業務目標為中心進行功能策劃,製作出欄目結構關系圖。

以滿足用戶體驗設計為目標,使用axure rp或同類軟體進行頁面策劃,製作出交互用例。

以頁面精美化設計為目標,使用PS、AI等軟體,調整,使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。

根據用戶反饋,進行頁面設計調整,以達到最優效果。

以上內容參考:網路-網頁設計

『貳』 h5頁面製作,設計多大的尺寸,怎麼和前端適配,實現設計的視覺稿效果

H5的頁面製作設計尺寸是有一定規范的,正常的話是考慮手機的適配問題,所以這個尺寸的話是基於手機來做的。

具體是多少呢?因為手機的尺寸是不一樣的,特別是在比例上,這就要求我們在不同的手機上必須要保證內容的呈現,一定是完整的,但自己要考慮一個問題,要把內容分為重要的和不重要,重要的是什麼呢,比如說背景圖;重要的話就是放一些文字信息等等。

這樣就劃分了一個安全區和出血區,出血區和安全區交界的部分,就是不重要的,可以在各位手機上被裁掉的或者用來遮住手機頁面背景的;但是安全的內容,是可以保證在任何大小屏幕手機上都可以完整顯示。

一般安全區內框的尺寸是375X603PX,但在製作上又是另外一回事了,作鋪滿內框的圖要按照這個尺寸的2倍大小去做。

出血區也就是外框尺寸是422X748PX,作鋪滿外框的圖要按照這個尺寸的2倍大小去做。

這個你可以參考下意派Epub360的畫布標准,這個工具是專業級的H5工具。

『叄』 移動端的h5頁面的尺寸是多少

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

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

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

左右邊框各:23.5px

上下邊框各:72.5px

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

『肆』 做手機網頁要考慮哪幾種尺寸呀

1、如果是比較復雜的頁面,我們只需要第一屏撐滿全屏,可以使用此方法。單獨定義html和body的樣式。【html,body{width:100%;height:100%;}】。

『伍』 前端設計稿過大的時候怎麼算寬高

過大是指哪方面的過大?

如果是文件過大,就按照文件內的尺寸進行製作;
如果是設計的尺寸過大,原則是一定按照設計圖製作,即便出了問題也是設計者的責任,網頁寬度超出合理范圍需要及時和設計者溝通,請確定一下幾個內容:
1、這個尺寸是否是客戶需要的尺寸;
2、客戶是否需要響應式,適應不同解析度和不同平面尺寸的頁面;
3、如果第二點是,那麼就應該有不同解析度的設計稿;

『陸』 HTML5移動網頁的設計稿尺寸應該是多少

HTML5的移動端網頁設計稿,通常情況下,內容區為750px或960px或者1080px的,一般不小於750px像素大小(寬度)
設計稿可以比750px大,但是絕對不能比750px小,這個主要是由於當前手機的解析度相對較高(iPhone 6是375物理像素,但實際像素為其兩倍,也就是750,這個750就是這么來的)
如果設計圖稿過小,前端在實現圖稿的時候裡面的圖片大小在高解析度的情況下會顯得模糊不清,所以這也是為何要「大」解析度
此外需要注意的是,要保證頁面的基準字體大小,在320px的設計稿當中,最小字體不宜小於12像素,其他像素的設計稿當中,等比例換算即可(12/320px*設計稿像素值)

『柒』 寫html頁面如何做到 尺寸固定 如果是瀏覽器或者屏幕變小。尺寸仍然不變 而不是div被擠變形

設置最小寬度屬性。

<html>

<head>

<title>主頁面</title>

<style>

body{

margin:0px;

width:1350px;

min-width:1024px;

max-width:100%;

height:100%;

background-color:#F0F0F0;

}

#head{

background-color:#FFFF00;

width:1350px;

height:100px;

min-width:1024px;

}

#center{

background-color:#00FFFF;

width:1350px;

min-height:100%;

position:relative;

min-width:1024px;

}

#foot{

background-color:#FF00FF;

width:1350px;

height:100px;

min-width:1024px;

}

#left{

width:150px;

height:100%;

background-color:#EEEEEE;

position:absolute;

margin-left:60px;

}

#main{

width:924px;

height:100%;

background-color:#EE00FF;

position:absolute;

margin-left:210px;

}

#right{

width:150px;

height:100%;

background-color:#EEFF00;

position:absolute;

margin-left:1134px;

}

</style>

</head>

<body>

<thead>

<divid="head">

你好

</div>

</thead>

<tbody>

<divid="center">

<divid="left"></div>

<divid="main"></div>

<divid="right"></div>

</div>

</tbody>

<tfoot>

<divid="foot">大家好</div>

</tfoot>

</body>

</html>

(7)前端尺寸擴展閱讀:

注意事項

寬度屬性為單詞width,寬度width包含了兩個重要的屬性:最大寬度屬性max-width和最小寬度屬性min-width。最大寬度屬性(max-width)用來定義寬度顯示的最大值,當拖動瀏覽器邊框使其顯示範圍大於最大寬度的時候,元素顯示最大寬度值定義的寬度。

在最大寬度屬性值中,可以使用三種屬性值,分別為auto值、長度值和百分比值;最小寬度屬性(min-width)用來定義寬度顯示的最小值,當拖動瀏覽器邊框使其顯示範圍小於最小寬度的時候,元素顯示最小寬度值定義的寬度,在最小寬度屬性中,可以使用三種屬性值,分別為auto值、長度值和百分比值。

『捌』 web前端,一張圖片的實際尺寸為1334×662,屏幕解析度比這張圖片還高,前端如何設計鋪滿整個屏幕的

一般是這樣的,
假設屏幕和圖片寬度比 大於高度比 應該設置圖片高度為屏幕高度,然後寬度等比拉伸並且居中;
假設屏幕和圖片寬度比 小於高度比 應該設置圖片寬度為屏幕寬度,然後高度等比拉伸並且居中;

『玖』 UI界面設計尺寸應該是多少

01、界面設計尺寸及欄高度

(1)我們用Photoshop做設計新建畫布應該設置多大呢?另外,iOS應用中的欄,包括狀態欄、導航欄、標簽欄、工具欄等,它們的高度又分別是多少呢?(注意:iOS嚴格規定了各個欄的高度,這個是必須遵守的)通過下面的表格和圖示來為你解答上面的問題。

『拾』 手機前端頁面尺寸

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

以上是移動端的尺寸,單獨的如果某一個移動的網站的尺寸是沒有的,因為移動網站的一半情況是按照%比的尺寸 來自動適應屏幕的大小,或者也通過設置,iphone執行什麼尺寸,安卓情況執行什麼尺寸的。