響應(yīng)式web設(shè)計(jì)淺析

響應(yīng)式web設(shè)計(jì)淺析ResponsiveWebDesignPart1：為什么需要響應(yīng)式web設(shè)計(jì)Part2：什么是響應(yīng)式web設(shè)計(jì)Part3：優(yōu)勢(shì)OR不足Part4：移動(dòng)終端屏顯兩要素Part5：設(shè)計(jì)流程Part6：設(shè)計(jì)師需知Part7:開(kāi)發(fā)者需知目錄Part1為什么需要響應(yīng)式web設(shè)計(jì)各種屏幕尺寸各種瀏覽器各種操作系統(tǒng)各種訪問(wèn)設(shè)備移動(dòng)設(shè)備發(fā)展突飛猛進(jìn)53億400萬(wàn)50萬(wàn)2.5億超越手機(jī)用戶iPhone4s上市前三天安卓每天激活I(lǐng)pad出貨量2015年流量超過(guò)桌面端客戶需求3g.m.wap.響應(yīng)式web設(shè)計(jì)解解決方案Part2什么是響應(yīng)式web設(shè)計(jì)簡(jiǎn)言之，就是一個(gè)網(wǎng)站能兼容多個(gè)終端什么是響應(yīng)式web設(shè)計(jì)Part3優(yōu)勢(shì)0R不足非響應(yīng)式web設(shè)計(jì)：視覺(jué)不統(tǒng)一，非最佳視覺(jué)？響應(yīng)式設(shè)計(jì)：多終端視覺(jué)和操作體驗(yàn)非常風(fēng)格統(tǒng)一節(jié)約成本￥開(kāi)發(fā)成本節(jié)約20%-30%維護(hù)成本輕松很多相比較手機(jī)定制網(wǎng)站，流量稍大但比較加載一個(gè)完整pc端網(wǎng)站顯然是小得多兼容性移動(dòng)帶寬流量不足低版本瀏覽器兼容性有問(wèn)題Part4移動(dòng)終端屏顯要素移動(dòng)瀏覽器內(nèi)核webkit內(nèi)核IOSAndroidBada(三星)BlackBerryOS6WebOS(palm)S-class(LG)S40/60(Nokia)OperaMobile:PrestoFirefox:GeckoBlackBerryold:MangoGeckoMicroB(meego):/mobile/browsers.html常見(jiàn)設(shè)備系統(tǒng)參數(shù)(豎屏)iPhone寬：320高：480iPad寬：1024高：768Android寬：320高：533WinPhone寬：300高：500數(shù)據(jù)僅供參考Android系統(tǒng)開(kāi)源，設(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ī)范之列，但實(shí)際使用中，網(wǎng)站內(nèi)容顯示并沒(méi)符合坐標(biāo)系統(tǒng)規(guī)范問(wèn)Iphone4寬：320pointsViewport-答通過(guò)viewport把自己冒充成更寬的屏幕寬：980pxmetaname="viewport"content="width=980px常見(jiàn)設(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è)計(jì)原則：禁止瀏覽器按viewport響應(yīng)按設(shè)備坐標(biāo)系統(tǒng)寬度顯示Part5設(shè)計(jì)流程用戶研究與設(shè)備規(guī)格預(yù)估1框架原型規(guī)劃2PSAI視覺(jué)設(shè)計(jì)3∞CSSJS前端構(gòu)建4∞Part6設(shè)計(jì)師需知觸屏移動(dòng)設(shè)備基礎(chǔ)手勢(shì)動(dòng)作移動(dòng)web設(shè)計(jì)優(yōu)先/ff/entry.asp?933輕UI設(shè)計(jì)重內(nèi)容設(shè)計(jì)文字可讀性頁(yè)面文字字號(hào)可延續(xù)桌面端設(shè)計(jì)大小更高12px11px10px響應(yīng)式圖片顯示內(nèi)容設(shè)計(jì)/保證寬度縮小后圖片內(nèi)容可讀性與視覺(jué)美觀/index.php/es/inicio響應(yīng)式寬屏圖片設(shè)計(jì)無(wú)CSSHover狀態(tài)交互形式的操作習(xí)慣更符合手指點(diǎn)觸操作-又大又平系統(tǒng)對(duì)flash的兼容性不佳避免用flash，html5響應(yīng)式web設(shè)計(jì)原則：禁止瀏覽器按viewport響應(yīng)按設(shè)備坐標(biāo)系統(tǒng)寬度顯示

蘋(píng)果iPhone人機(jī)界面指南推薦的最小目標(biāo)大小為44px寬，44px高。微軟的Windows一個(gè)最低目標(biāo)尺寸是26px乘以34px.諾基亞的開(kāi)發(fā)者指南建議，目標(biāo)尺寸應(yīng)不小于1cm×1cm平方或28×28像素。來(lái)自各移動(dòng)平臺(tái)的設(shè)計(jì)指導(dǎo)方針當(dāng)幾個(gè)小觸摸目標(biāo)彼此靠得比較近時(shí)，用戶會(huì)不小心觸到鄰近的目標(biāo)而引發(fā)意外操作。而拇指觸屏?xí)r導(dǎo)致的錯(cuò)誤會(huì)更明顯，因?yàn)樗某叽缡亲畲蟮?。所以有時(shí)用戶會(huì)傾斜拇指，讓其側(cè)身去觸及屏幕目標(biāo)，這是一個(gè)很不必要的操作。小的觸摸目標(biāo)會(huì)導(dǎo)致操作錯(cuò)誤廠商建議的尺寸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è)計(jì)的界面氣質(zhì)1.保持用戶對(duì)頁(yè)面專注力，讓人一目了然如何使用你的內(nèi)容2.避免噪音、無(wú)用的留白、花里胡哨的背景，避免用戶被內(nèi)容以外的視覺(jué)信息干擾。3.盡可能減少用戶的輸入，記憶用戶信息；有策略地向用戶提請(qǐng)求，簡(jiǎn)潔表達(dá)必要信息4.簡(jiǎn)潔明確地提示引導(dǎo)性操作（如新手任務(wù)、操作指引、功能介紹）和中斷性操作（如提示、詢問(wèn)）。5.

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

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

MediaQuery，以JS來(lái)輔助，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è)計(jì)的制作原則

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

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

2.em會(huì)繼承父級(jí)元素的字體大小。3.px是絕對(duì)單位，

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

.main{

float:right;

width:70%;

}

.leftBar{

float:left;

width:25%;

}4.根據(jù)mediaquery來(lái)設(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){

}

移動(dòng)平臺(tái)系統(tǒng)特性分析

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