導航:首頁 > 萬維百科 > 手機網頁設計多大

手機網頁設計多大

發布時間:2020-12-12 16:43:53

1、手機端網頁設計尺寸多少

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

2、網頁美工,用ps設計,設置電腦網頁尺寸,和手機網頁尺寸分別是多少?謝謝!

網頁尺寸:
淘寶是990(950)寬*任意高,要是自己或者企業的話,這個你隨便定,一般寬度是在950-1200之間
手機尺寸:
淘寶620(480)寬*任意高,要是自己或者用其他軟體的話請參考軟體的要求。

3、手機版網頁設計寬度問題

在那個變大的頁面設置max-width、、然後根據窗口大小修改、、那個js和CSS要在需要的頁面都在、不能放在CSS文件中、、詳細請參考guxiannong.com

4、做手機網頁要考慮哪幾種尺寸呀

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模塊,這樣就可以實現想要的效果了。

5、有誰知道手機網頁設計尺寸。

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執行什麼尺寸,安卓情況執行什麼尺寸的。

6、設計手機網站時,一般寬度設計為多少像素?

手機網站最好是用百分比全屏自適用的方式做,那樣不管手機是什麼解析度都可以使用。

一般android系統設計的時候可以使用320x480的解析度進行設計。

蘋果手機使用:640x960解析度進行設計。

7、怎麼製作html5網站頁面讓它適應電腦和手機的尺寸

媒體查詢語法:
@media screen and (max-width:960px){...}
@media screen and (max-width:768px){...}
@media screen and (max-width:320px){...}
<link rel="stylesheet" media="screen and (orientation:portrait) and (min-width:800px),projection" href="800wide-portrait-screen.css" />
注意:1,媒體查詢之間使用逗號隔開;2,在projection之後,沒有and,也沒有任何特性/值的組合。沒有後續表達式,意味著只要是projection就滿足條件。
@media screen and (max-device-width:400px){......}
@import url("~~.css") screen and (max-width:360px);
(@import方法會增加http請求,影響載入速度。)
媒體查詢能檢測的特性(最長用過的是設備的視口寬度(width)和屏幕寬度(device-width)):
widht:視口寬度
height:視口高度
device-width:渲染表面的寬度(設備屏幕的寬度)
device-height:渲染表面的高度(設備屏幕的高度)
orientation:檢查設備處於橫向還是縱向。
aspect-ratio:基於視口寬度和高度的寬高比。(16:9的顯示屏可以定義為aspect-ratio:16/9)
device-aspect-ratio:和aspect-ratio類似,基於設備渲染平面寬度和高度的寬高比。
color:每種顏色的位數。例:min-color:16會檢測設備是否擁有16位顏色。
color-index:色板的顏色索引表中的顏色數。值必須是非負數。
monochrom:檢測單色幀緩沖區中每像素所使用的位數。值必須是非負整數。
resolution:用來檢測屏幕或列印機的解析度,如min-resolution:300dpi。還可以接受每厘米像素點數的度量值,如min-resolution:118dpcm。
scan:電視機的掃描方式,值可設為progressive(逐行掃描)或interlace(隔行掃描)。如720p p表示逐行掃描。
grid:用來檢測輸出設備是網格設備還是點陣圖設備。
在上述所有特性中,除scan和grid之外,都可以使用min和max前綴來創建一個查詢范圍。例如:
@import url("~~.css") screen and (min-width:200px) and (max-width:360px);這樣~~.css只會引入視口寬度介於200px至360px的顯示屏設備。
在樣式表的開頭位置設置樣式,以便適應所有涉及,然後使用媒體查詢來進一步重寫響應的部分。例如,先針對大視口設計(用戶大多數情況下使用滑鼠),將導航鏈接設計成簡單的文字鏈接;然後再針對較小的視口,使用媒體查詢重寫這部分樣式,為拇指一族提供更大點擊區域。
使用多個獨立的文件會增加http請求數量,建議在已有的樣式表中追加媒體查詢樣式。(https://github.com/scottjehl/Respond)是為IE8及更低版本增加媒體查詢支持的最快的js工具。
阻止移動瀏覽器自動調整頁面大小:
在html的<head>中插入一個<meta>標簽。<meta>標簽中可以設置具體的寬度(如px)或者縮放比例(如2.0 設備實際尺寸的兩倍)。例如:<meta name="viewport" content="initial-scale=2.0,width=device-width">
<meta>標簽還可以控制頁面可縮放的范圍,下面的代碼允許用戶將頁面最多放大至設備寬度的3倍,最小壓縮至設備寬度的一半。<meta name="viewport" content="width=device-width,maximum-scale=3,minimum-scale=0.5">
還可以禁止用戶縮放,不過縮放是一個重要的輔助功能,所以很少禁用。<meta name="viewport" content="initial-scale=1.0,user-scalable=no"> user-scalable=no即禁止縮放。
w3c正嘗試使用@viewport聲明,不用在<head>中添加<meta>,不過要使用私有前綴,如@-o-viewport{width:320px}
針對不同視口寬度修正設計:
首先在css中為平板設備增加媒體查詢,數值ipad的視口寬度為768px(橫向1024px)
@media screen and (max-width:768px){
#wrapper{
widht:768px;
}
#header,#footer,#nav {
width:748px;
}
}
=============================這只是一部分筆記===========
推薦一本書 響應式Web設計:HTML5和CSS3實戰.pdf

8、智能手機的網頁設計尺寸多大為佳?

現在的手機網站設計大都會採用百分比,所以不用考慮這個問題了。因為不是所有手機的屏幕大小都是一樣的。【Mcmore手機商城系統】採用行業先進的HTML5技術,與傳統意義上的WAP手機商城不同,使你的手機網店更加接近手機APP界面,界面交互完美而且功能完善。http://www.mcmore.com/ydds/

9、網頁設計標准字體大小為多少毫米?電腦顯示器,包括手機的,最好還有畫布畫板的尺寸 懂得給分

一般中文的字體大小是12px或者14px。隨著顯示器解析度不斷提高,12px的文字在大於1440*900的顯示器里看起來會顯得比較小,閱讀起來不是很容易,所以現在網頁設計裡面用12px的已經比較少了,特別是文章正文部分,普遍都會用14px。13px的字體在IE6下面會有一點點顯示上的bug,所以現在用得也不太多,不過隨著IE6慢慢被淘汰,這個問題也不再是一個問題了。而對於標題欄的文字大小,沒有特別的限制,視覺上感覺舒服就行。
字體大小代碼:font-size:14px(字體大小14像素)
對於font-family,一般來說14px及以下大小的文字,應當設置為宋體,當然也可以設置為微軟雅黑。不過在XP下默認是沒有雅黑字體的,所以在css裡面可以這樣設置字體:
font-family:"Microsoft Yahei",simSun,Arial;
把幾個字體用逗號隔開,如果系統沒有第一種字體,就用第二種,如果沒有第二種就用第三種,以此類推。

與手機網頁設計多大相關的知識