1. 移動端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英寸的。
2. 手機前端頁面尺寸
iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隱藏URL與狀態欄)
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隱藏URL與狀態欄)
Note2 360 * 567 (未隱藏URL與狀態欄)
iPad 3/4 768*928 (未隱藏URL與狀態欄)
GALAXY SIII 360 * 567 (未隱藏URL與狀態欄)
小米2A 360 *567 (未隱藏URL與狀態欄)
HTC G10 320 * 460
<meta name="viewport"
網頁手機wap2.0網頁的head里加入下面這條元標簽,在iPhone的瀏覽器中頁面將以原始大小顯示,並不允許縮放。
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no">
width - viewport的寬度 height -
viewport的高度
initial-scale - 初始的縮放比例
minimum-scale -
允許用戶縮放到的最小比例
maximum-scale -
允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
參考:
一、網頁手機wap2.0網頁的head里加入下面這條元標簽,在iPhone的瀏覽器中頁面將以原始大小顯示,並不允許縮放。
<meta name="viewport"
content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no">
其中: width - viewport的寬度 height - viewport的高度 initial-scale -
初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例 maximum-scale - 允許用戶縮放到的最大比例
user-scalable -
用戶是否可以手動縮放c
二、關於meta的詳細介紹請參考
三、下文是關於Meta的例子的詳細介紹 原文地址
3. Meta元素可視區
默認情況下,iPhone上的Safari會象在大屏幕的
桌面瀏覽器那樣顯示你的頁面,寬度達到了980像素,然後縮小內容以適應iPhone的小屏幕,因此用戶在iPhone看這個頁面時感覺字體就比較小了,
也比較模糊,必須要放大才能看得真切,對於一個普通的Web頁面似乎可以接受,但對於一個常用的應用程序就沒幾個人能夠受得了。
幸運的是可以使用特殊的Meta元素可視區進行糾正:
<meta
name="viewport" content="width=device-width"/>
這個元素通知瀏覽器使用設備的寬度作為可視區的寬度,而不是默認的980像素了,我們可以看看兩個不同的例子。
例3(鏈接:
viewport.html)顯示了一個簡單的段落元素,沒有Meta元素可視區,字體有點模糊。在iPhone中運行的實際情況如下圖所示。
圖 1 無可視區的顯示效果
例4(鏈接:
/viewport.html)包括了一個可視區元素,現在設備寬度只有320像素,字體也比前一個例子更清晰了。在iPhone中運行的實際情況如下圖
所示。
圖 2 有可視區的顯示效果
另外,你還可以手動設置device-width的值,例如,假設你的博客頁面的寬度是750像素,那麼桌面屏幕最佳大小就是800x600像素,例
5(鏈接:
/fixed750.html)顯示了一個刪減版本,如果你在iPhone中瀏覽它,你會看到980像素剩下的空間都填充了白色。
為了消除額外的空間,可以使用meta元素可視區將寬度設為780像素:
<meta
name="viewport" content="width=780"/>
例6(鏈接:/fixed750-viewport.html)顯示了meta元素可視區布局被固定後的效果。
Meta元素可視區的內容可以包括多個逗號分隔的值,如initial-scale –
用戶最初看到頁面時的放大級別,對於Web應用程序,一個常見的設置是:
<meta
name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
這個元素設置寬度為設備的最大寬度,禁止用戶放大和縮小
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
以上是移動端的尺寸,單獨的如果某一個移動的網站的尺寸是沒有的,因為移動網站的一半情況是按照%比的尺寸 來自動適應屏幕的大小,或者也通過設置,iphone執行什麼尺寸,安卓情況執行什麼尺寸的。
4. Web 頁面採用多大的寬度最合適
Web 頁面採用多大的寬度最合適
網頁設計標准尺寸:
1. 800×600下,網頁寬度保持在778以內,就不會出現水平滾動條,高度則視版面和內容決定。
2. 1024×768下,網頁寬度保持在1002以內,如果滿框顯示的話,高度是612눯之間,就不會出現水平滾動條和垂直滾動條。
3. 在ps裡面做網頁可以在800×600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740×560左右。
網頁設計在初始要界定出網頁的尺寸大小.就像繪畫給出一塊畫版來.這樣才能方便設計.
網頁的尺寸受限於兩個因素:一個是顯示器螢幕.顯示器現在種類很多,以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
1.65主頻的cpu用多大的 顯示卡 最合適 還有 多大的記憶體 最合適
您好。 建議您 用128MB的顯示卡 和1G記憶體 本身您的CPU主頻就不是很高 如果用好點的顯示卡 和高點的記憶體 就浪費了
櫥櫃拉籃寬度選擇多大最合適?
櫥櫃拉籃一般是根據您家櫥櫃吃尺寸來定做的,深度42cm的常用櫥櫃拉籃尺寸:600櫃體為52.3*14cm,700櫃體為62.3*14cm,750櫃體為66.6*14cm,800櫃體為72.3*14cm等,深度45.5cm的常用櫥櫃拉籃尺寸(:600櫃體為56.5*20cm,700櫃體為66.5*20cm,750櫃體為71.5*20cm,800櫃體為76.5*20cm等
淘寶手機詳情頁面寬度到底多少最合適咧?
手機螢幕尺寸有大有小,寬度480 – 620畫素會比較合適。格式為JPGGIFPNG。當需要在圖片上新增文字時,中文字型大於等於30號字,英文和阿拉伯數字大於等於20號字。
4.2米寬的客廳用多大的電視最合適
電視距離適宜在3米左右,根據沙發到電視的距離來決定。
1.7米使用26英寸
2米使用32英寸
2.4米使用37英寸
2.5米使用40英寸
2.7米使用42英寸
3米使用46英寸
3.3米使用52英寸
用多大的魚缸養銀龍最合適
按尺寸來說 最小尺寸是一米 寬40 銀龍體長不得超過40 如果銀龍體長超過50 就建議一米二寬50以上的缸子養了 一米五 一米八 兩米都能養 越大越好唄
金毛用多大的狗窩最合適
如果你養的是金毛犬,那就更該如此了,要讓它知道,白天當然不用說,夜晚這就是它睡覺的地方,不許它想在哪兒睡就在哪兒睡。
對於金毛犬來說,給它指定了一個住處,讓它在想躺的時候也能隨便在那兒伸伸腰,也算比較自在。
狗屋沒必要十分講究,只要寬敞就好。其實用個紙箱子或者木箱子在上面鋪塊毛巾也行。若買商店裡賣的狗屋,則有條件在客人來訪前,事先將金毛犬關起來,的確很方便。
狗屋應放置在安靜、偏暗點兒的地方,最好選在冬暖夏涼、通風避曬之處,可能的話冬季和夏季應選在不同的地方。
也可以用鐵籠子代替狗屋
要是你們家足夠敞的話,也可以在屋裡准備一個鐵籠子,裡面同時可以放上便器和金毛犬睡覺的窩。有一種能摺疊的鐵籠子,可以很方便地拆運安裝,天氣好時還可以把金毛犬連籠子挪到院子里曬曬太陽。
中星九號用多大的鍋最合適
目前用小鍋接收中星9號的人佔百分之九十九以上,因為它上面有免費的46套央視及省級衛視節目。其它衛星如亞太5號、新天11符和韓星5號上面節目少,也沒有多大的收看價值。最小的小鍋直徑35厘米左右。 中星9號位於西南方向.應該影響不大。
86用多大輪胎最合適
1.抓地力增加。2。增加車身高度,3增加行車穩定性。4.油耗增加。5。對輪轂,內襯,轉向角度,有影響!
5. 移動端Web頁面適配方案(整理版)
@(概述)[基本概念|百分比|rem|vw/vh|響應式設計]
移動端web頁面的開發,由於手機 屏幕尺寸 、 解析度 不同,或者需要考慮 橫豎屏 問題,為了使得web頁面在不同移動設備上具有相適應的展示效果,需要在開發過程中使用合理的適配方案來解決這個問題。
早期網頁設計採用 靜態布局 ,通過 <meta> 標簽中的 applicable-device 應用設備標識識別移動設備,即 <meta name = 'applicable-device' content = 'mobile'> ,在 <meta> 標簽中的 viewport 標簽中設置 width ,通過 js 動態修改標簽的 initial-scale 使得頁面等比縮放,剛好占滿整個屏幕。一些文章中有提到靜態布局中頁面各個元素採用 px 為單位,這種方案實現簡單,不存在兼容性問題,但用戶體驗很不友好。
後面出現 流式布局 ,使用百分比 % 定義寬度,高度使用 px 固定,根據可視區域大小實時進行尺寸調整,通常使用 max-width/min-width 控制尺寸范圍過大或者過小。這種方案實現比較簡單,但在大屏手機或橫豎屏切換場景下可能會導致頁面元素被拉伸變形,字體大小無法隨屏幕大小發生變化。
順應不同頁面字體大小展現問題,出現了 彈性布局 。這種布局方案下,包裹文字的元素的尺寸採用 em/rem 為單位,頁面主要劃分區域的尺寸依據情況使用 px 、百分數或者 em/rem 。如一些高校的網站 jlu ,頁面的主要劃分區域使用 px 和百分比,包裹文字的元素和文字採用 em 。
上面的這幾種方案下,頁面元素的大小按照屏幕解析度進行適配調整,但是整體布局不變,對於 響應式web設計 ,網頁布局會隨著訪問它的視口及設備的不同呈現不同的樣式,在實現上可能會以上多種方案的結合,同時搭配 媒體查詢 技術使用,使得一個頁面在多個終端 (PC, mobile, pad) 呈現滿意效果,如 mashable 。
[TOC]
像素,是屏幕上顯示數據的最基本的點,表示相對大小。不同解析度下相同長度的 px 元素顯示會不一樣,是因為像素點的個數相同情況下,不同解析度下每個像素點對應的像素寬度不同。比如同樣是 14px 大小的字,在 1366×768 顯示屏下會顯示的小,在 1024×768 顯示屏下會相對大。也稱為 物理像素(設備像素 ),是解析度的尺寸單位。
印刷行業常用單位,能夠使用測量設備測得的長度,等於 1/72 英寸。
在不同屏幕上, css 像素呈現的物理尺寸一致,但 css 像素對應的物理像素具數不同。標準的顯示密度下, 1 個 css 像素對應一個物理像素,縮放時, 1 個 css 像素對應的物理像素會減增。是一種 設備獨立像素(device independent pixels: DIPs)
像素密度,每英寸所擁有的像素數。值越高,顯示畫面細節越豐富。計算公式為: ,其中 和 是解析度的寬高, 是屏幕尺寸。
列印設備每英寸印刷出來的點有多少個,值越高,圖片越細膩。
設備物理像素和設備獨立像素比 ,即 是指在理想布局寬度,使用多少個物理像素來渲染一個css像素。js中通過 window.devicePixelRatio 獲取,css中通過 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 進行媒體查詢。
<meta> 標簽中定義了一些元數據信息,通過設置 <meta name = "viewport"> ,提供有關 視口初始大小 的信息,供 移動設備 使用。屬性值為
移動端涉及 布局視口 (Layout Viewport)、 視覺視口 (Visual ViewPort)和 理想視口 (Ideal ViewPort)。
與移動端web頁面適配有關的手機屏幕特性包括
硬體所支持的,屏幕每行的像素 * 每列的像素點數,單位是 px 。
設備獨立的,軟體可以達到的,個人理解是使得軟體/頁面在不同屏幕上顯示出來的效果一致。
像素解析度 ÷ 邏輯解析度等於 倍率 ,如 @3x 表示解析度的 3 倍。一個已知物理像素大小的元素,如果在普通屏中其設備像素等於 css 像素,但在一些高清屏中,如 Retina 顯示屏,一個css像素對應 2 或 3 個設備像素,這時顯示出來的元素會變小。為了讓元素如期待顯示,需要傳入 原始設計稿尺寸 × 倍率 的設計稿,根據 DPR 的定義,這樣載入後能夠達到同樣的效果。
手機屏幕對角線長度換算成英寸的大小
貼上 源碼 分析
視口 是瀏覽器中用於呈現網頁的區域,移動端的視口通常指的是 布局視口
使用 css 預處理器把設計稿尺寸轉換為 vw 單位,包括 文本 , 布局高寬 , 間距 等,使得這些元素能夠隨視口大小自適應調整。以 1080px 設計稿為基準,轉化的計算表示為
響應式設計 使得一個網站同時適配 多種設備 和 多個屏幕 ,讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸出方式、設備/瀏覽器能力而變化),使其視覺合理,交互方式符合習慣。如使得內容區塊可伸縮與自由排布,邊距適應頁面尺寸,圖片適應比例變化,能夠自動隱藏/部分顯示內容,能自動折疊導航和菜單。
6. 製作一個手機web前端
製作一個手機web前端:
工具:智能手機,普通智能手機:320×480豎版。
節省樣式的載入
目前而言,要改變網站的配色方案或者寫iPad專用的樣式表,是通過如下代碼:
可以通過下面這個方法去載入指定解析度下的樣式,當使用相應的設備,才能載入到相應的樣式表。
meta標簽,即CSS媒體查詢
強制讓文檔的寬度與設備的寬度保持1:1;
文檔初始化縮放衡雹並比例是1:1;
不允許用戶點擊屏幕放大瀏覽;
允許用戶縮放到咐跡的最大比例尤其要注意的是content里多個屬性的設置一定要用分號空格來隔開,如果不規范將不會起作用。
CSS3-webkit相關的HTML5標記元素的使用功能
消除被點擊元素的外觀變化,所謂的點擊後高亮。
阻止旋轉屏幕時自動調整字體大小。
解決字體在移動端比肆腔例縮小後出現鋸齒的問題。
appearance屬性使元素看上去像標準的用戶界面元素。
滑鼠可以懸停在內容上(指向該內容)而不激活它(單擊它)。
使用自適應模式布局
safari都能夠正常的顯示網頁內容(也就是自適應),而且自適應之後也不用考慮解析度的問題。
javascript庫
方法一:
有很多設備的「」都大於1.5或者等於2(window.=物理像素/dips)。移動端webapp上CSS要為Retian屏幕准備另外的圖片及代碼。
方法二:
7. web網頁設計尺寸標准(最小寬度/尺寸)
綜上所述,電腦屏幕解析度1024px,低於1024px則不再考慮,所以以上網站設計網站的最小寬度/尺寸小於1000px;