響應(yīng)式web設(shè)計淺析ResponsiveWebDesignPart1：為什么需要響應(yīng)式web設(shè)計Part2：什么是響應(yīng)式web設(shè)計Part3：優(yōu)勢OR不足Part4：移動終端屏顯兩要素Part5：設(shè)計流程Part6：設(shè)計師需知Part7:開發(fā)者需知目錄Part1為什么需要響應(yīng)式web設(shè)計各種屏幕尺寸各種瀏覽器各種操作系統(tǒng)各種訪問設(shè)備移動設(shè)備發(fā)展突飛猛進53億400萬50萬2.5億超越手機用戶iPhone4s上市前三天安卓每天激活I(lǐng)pad出貨量2015年流量超過桌面端客戶需求3g.m.wap.響應(yīng)式web設(shè)計解解決方案Part2什么是響應(yīng)式web設(shè)計簡言之，就是一個網(wǎng)站能兼容多個終端什么是響應(yīng)式web設(shè)計Part3優(yōu)勢0R不足非響應(yīng)式web設(shè)計：視覺不統(tǒng)一，非最佳視覺？響應(yīng)式設(shè)計：多終端視覺和操作體驗非常風(fēng)格統(tǒng)一節(jié)約成本￥開發(fā)成本節(jié)約20%-30%維護成本輕松很多相比較手機定制網(wǎng)站，流量稍大但比較加載一個完整pc端網(wǎng)站顯然是小得多兼容性移動帶寬流量不足低版本瀏覽器兼容性有問題Part4移動終端屏顯要素移動瀏覽器內(nèi)核webkit內(nèi)核IOSAndroidBada(三星)BlackBerryOS6WebOS(palm)S-class(LG)S40/60(Nokia)OperaMobile:PrestoFirefox:GeckoBlackBerryold:MangoGeckoMicroB(meego):/mobile/browsers.html常見設(shè)備系統(tǒng)參數(shù)(豎屏)iPhone寬：320高：480iPad寬：1024高：768Android寬：320高：533WinPhone寬：300高：500數(shù)據(jù)僅供參考Android系統(tǒng)開源，設(shè)備生產(chǎn)商定制化較多ipad：1024*768ipad2：1024*768新ipad：2054*1536Iphone3g：320*480Iphone3gs：320*480Iphone4：640*960Iphone4s：640*960480*800（分辨率：480*800）情況下屏幕分辨率：屏幕分辨率：屏幕分辨率：屏幕分辨率：按坐標(biāo)系統(tǒng)顯示原理，設(shè)備瀏覽器也在設(shè)備坐標(biāo)系統(tǒng)規(guī)范之列，但實際使用中，網(wǎng)站內(nèi)容顯示并沒符合坐標(biāo)系統(tǒng)規(guī)范問Iphone4寬：320pointsViewport-答通過viewport把自己冒充成更寬的屏幕寬：980pxmetaname="viewport"content="width=980px常見設(shè)備viewport數(shù)值iPhone980iPad1024Android980WinPhone1024（分辨率：480*800）情況下Viewport可自定義<meta

name="viewport"

content=“width=device-width;/yhuang/archive/2012/04/03/responsive_web_design.html#MV寬度=設(shè)備寬度<meta

name="viewport"

content=“width=320;寬度=320px<meta

name="viewport"

content=“width=960;寬度=960px響應(yīng)式web設(shè)計原則：禁止瀏覽器按viewport響應(yīng)按設(shè)備坐標(biāo)系統(tǒng)寬度顯示Part5設(shè)計流程用戶研究與設(shè)備規(guī)格預(yù)估1框架原型規(guī)劃2PSAI視覺設(shè)計3∞CSSJS前端構(gòu)建4∞Part6設(shè)計師需知觸屏移動設(shè)備基礎(chǔ)手勢動作移動web設(shè)計優(yōu)先/ff/entry.asp?933輕UI設(shè)計重內(nèi)容設(shè)計文字可讀性頁面文字字號可延續(xù)桌面端設(shè)計大小更高12px11px10px響應(yīng)式圖片顯示內(nèi)容設(shè)計/保證寬度縮小后圖片內(nèi)容可讀性與視覺美觀/index.php/es/inicio響應(yīng)式寬屏圖片設(shè)計無CSSHover狀態(tài)交互形式的操作習(xí)慣更符合手指點觸操作-又大又平系統(tǒng)對flash的兼容性不佳避免用flash，html5響應(yīng)式web設(shè)計原則：禁止瀏覽器按viewport響應(yīng)按設(shè)備坐標(biāo)系統(tǒng)寬度顯示

蘋果iPhone人機界面指南推薦的最小目標(biāo)大小為44px寬，44px高。微軟的Windows一個最低目標(biāo)尺寸是26px乘以34px.諾基亞的開發(fā)者指南建議，目標(biāo)尺寸應(yīng)不小于1cm×1cm平方或28×28像素。來自各移動平臺的設(shè)計指導(dǎo)方針當(dāng)幾個小觸摸目標(biāo)彼此靠得比較近時，用戶會不小心觸到鄰近的目標(biāo)而引發(fā)意外操作。而拇指觸屏?xí)r導(dǎo)致的錯誤會更明顯，因為它的尺寸是最大的。所以有時用戶會傾斜拇指，讓其側(cè)身去觸及屏幕目標(biāo)，這是一個很不必要的操作。小的觸摸目標(biāo)會導(dǎo)致操作錯誤廠商建議的尺寸Apple’s

iPhone

Human

Interface

Guidelines建議最小尺寸為44x44pixel，Microsoft’s

Windows

Phone

UI

Design

and

Interaction

Guide建議

34x34pixel，Nokia’s

Developer

Guidelines建議28x28pixel響應(yīng)式設(shè)計的界面氣質(zhì)1.保持用戶對頁面專注力，讓人一目了然如何使用你的內(nèi)容2.避免噪音、無用的留白、花里胡哨的背景，避免用戶被內(nèi)容以外的視覺信息干擾。3.盡可能減少用戶的輸入，記憶用戶信息；有策略地向用戶提請求，簡潔表達必要信息4.簡潔明確地提示引導(dǎo)性操作（如新手任務(wù)、操作指引、功能介紹）和中斷性操作（如提示、詢問）。5.

避免不必要的交互6.觸屏界面顯著的氣質(zhì)表現(xiàn)為：足夠響應(yīng)范圍的控件和文字鏈接圓角紙張化的扁平風(fēng)格與相對立體的按鈕頁面中常見圖文混排css3的應(yīng)用減少圖片的使用。屏幕高度大于頁面高度時的頁面拉伸問題考慮屏幕過長或者過短帶來的影響，確保長屏幕時，頁面的全屏。設(shè)計者應(yīng)考慮，工具欄，導(dǎo)航欄狀態(tài)欄變化顯示或隱藏的情況Part7開發(fā)者需知技術(shù)實現(xiàn)

主要實現(xiàn)方法是CSS3

MediaQuery，以JS來輔助，HTLM5標(biāo)簽并不是必須的。使用方法：@media

設(shè)備類型

and(設(shè)備特性){

樣式代碼

}設(shè)備類型值設(shè)備特性Mediaquery兼容的瀏覽器IE6，7，8兼容Mediaquery：<!--[ifltIE9]><scriptsrc="/svn/trunk/css3-ediaqueries.js"></script><![endif]-->CSS3MediaQuery引入方法

1link方式：<linkrel="stylesheet"type="text/css"href="css/style.css"media="alland(max-width:340px)"/>2xml方式:<?xml-stylesheetrel="stylesheet"media="alland(max-width:340px)"href="css/style.css"?>3@import方式：@importurl(example.css)screenand(min-width:800px);/*IE7及更早瀏覽器不支持@import*/4@media方式：/**適配Ipad*

*/@mediaalland(max-width:780px){

font-size:18px;}/**適配Iphone*

*/@mediaalland(max-width:340px){

font-size:12px;}響應(yīng)式設(shè)計的制作原則

1不使用絕對寬度2建議使用相對大小的字體（em）(em指字體高，任意瀏覽器的默認字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合:1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px,這樣12px=1.2em,10px=1em,也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。em有如下特點：

1.em的值并不是固定的；

2.em會繼承父級元素的字體大小。3.px是絕對單位，

em是相對單位;可隨頁面縮放。保證縮放時候的整體性。)3流動布局（fluidgrid）所謂"流動布局"，就是各個區(qū)塊的位置都是浮動的，不是固定不變的。

.main{

float:right;

width:70%;

}

.leftBar{

float:left;

width:25%;

}4.根據(jù)mediaquery來設(shè)置CSS5圖片的自適應(yīng)（fluidimage）已知屏幕分辨率如下：@media(max-device-width:1280px)and(orientation:landscape){}@mediascreenand(max-width:1028px){

}@mediascreenand(max-width:1024px){

}@mediascreenand(max-width:960px){

}@mediascreenand(max-width:854px){

}@mediascreenand(max-width:800px){

}@media(max-device-width:768px)and(orientation:portrait){}@mediascreenand(max-width:640px){

}

@media(max-device-width:600px)and(orientation:portrait){

}@media(max-device-width:480px)and(orientation:portrait){

}@mediascreenand(max-width:360px){

}@mediascreenand(max-width:320px){

}

移動平臺系統(tǒng)特性分析

iPhone和Android瀏覽器都是Webkit內(nèi)核。不支持Flash和Java（包括JavaApplet）不支持插件(iPhone)不支持基于瀏覽器的文件下載，但Android支持zip包下載！不支持插入本地文件，即不支持<input/>上傳文件。（ios6.1以下版本）節(jié)省緩存。iPhone僅支持小于25kb的緩存支持cookie界面的動態(tài)交互則可利用JavaScript來實現(xiàn)支持播放html5視頻支持表格、CSS3高級樣式表Ajax動態(tài)異步請求與局部刷新。Opra瀏覽器是個異類采用Prest