1、響應(yīng)式設(shè)計(jì)(RWD): Response Web Design ->?其也是響應(yīng)式布局的依據(jù)
隨著用戶訪問(wèn)web頁(yè)面終端的多樣化替梨，web頁(yè)面設(shè)計(jì)無(wú)法適應(yīng)多樣化的終端設(shè)備钓试，為了提高開(kāi)發(fā)效率装黑，滿足用戶需求，Ethan Marcottee在A List Apart發(fā)表了一篇開(kāi)創(chuàng)性的文章弓熏，將彈性網(wǎng)格布局恋谭、彈性圖片、媒體/媒體查詢整合起來(lái)硝烂，稱其為響應(yīng)式設(shè)計(jì)箕别；
- - - >>>?響應(yīng)式設(shè)計(jì)的三個(gè)條件：(1).網(wǎng)站必須建立靈活的網(wǎng)格基礎(chǔ)(設(shè)置的寬高不能是固定的)；(2).網(wǎng)頁(yè)圖片必須是可伸縮的(頁(yè)面中圖片不固定寬/高)滞谢；(3).媒體查詢(MediaQuery)串稀，不同終端上正常展示頁(yè)面，用戶體驗(yàn)不改變狮杨；
- - - >>>響應(yīng)式設(shè)計(jì)中的術(shù)語(yǔ)：(1).流體網(wǎng)格：多個(gè)自適應(yīng)盒子形成的便是"網(wǎng)格";(寬/高可伸縮[相對(duì)單位]母截，可用flex布局)；(2).彈性圖片：圖片自適應(yīng)橄教，可將引入的img圖片變?yōu)槭褂帽尘皥D片清寇，隨div自適應(yīng)；(3).媒體查詢：網(wǎng)頁(yè)在不同終端上呈現(xiàn)效果相同;(聚焦點(diǎn)并非是不同終端展示效果一模一樣护蝶，而是強(qiáng)調(diào)用戶體驗(yàn)相同)华烟；(4).屏幕分辨率：越大越清晰；(5).主要斷點(diǎn)：設(shè)備寬/高的臨界點(diǎn)(例如：600px 1000px)持灰；
- - ->>>響應(yīng)式布局的技巧：結(jié)構(gòu)上不要冗余盔夜，不要使用內(nèi)聯(lián)元素，形成簡(jiǎn)單有語(yǔ)義的核心布局堤魁；樣式上丟棄沒(méi)用的絕對(duì)定位和浮動(dòng)樣式喂链；盡量少的使用JS、Flash妥泉；
2椭微、響應(yīng)式布局
(1).模擬移動(dòng)端的meta標(biāo)簽(響應(yīng)式布局，使用戶在不同設(shè)備上體驗(yàn)盡量相同)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? viewport:視口設(shè)置盲链；content:頁(yè)面內(nèi)容蝇率；width=device-width;//視口寬度=設(shè)備寬度；height=device-height刽沾；initial-scale=1.0;//不縮放本慕；minimum-scale=1.0;//最小縮放比；maximum-scale=1.0;//最大縮放比悠轩；user-scalable=yes/no;//是否允許用戶縮放；
(2).媒體查詢：-> 響應(yīng)式布局的解決方案
[1].media type;//CSS2屬性(其可對(duì)不同設(shè)備指定特定的樣式)攻泼；
[2].media query;//CSS3屬性 ->其是對(duì)media type的增強(qiáng)(可理解為media type + css屬性)火架，CSS3中同媒體類型下可繼續(xù)劃分鉴象，等同于其對(duì)響應(yīng)式布局情況更加“細(xì)分”；
?- - - >>>CSS樣式中會(huì)有“同權(quán)重”覆蓋現(xiàn)象何鸡，所以建議媒體查詢寫(xiě)在“基礎(chǔ)樣式”的后面纺弊，媒體查詢自身沒(méi)有所謂的“權(quán)重”(其就是普通CSS樣式)；
- ->>多個(gè)媒體查詢使用逗號(hào)分隔骡男，@media screen and(max-width:200px),print (min-width: 500px){};(max-width: 200px);稱之為特性淆游、主要斷點(diǎn)，必須加括號(hào)隔盛；
[3].media type:?常用all;/screen
[4].media features;//媒體特性犹菱，常用屬性width(視口)，device-width(設(shè)備)吮炕；
[5].邏輯操作符? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?@media screen and (max-width:1000px) and(min-width:600px);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?@media screen and (min-width: 769px), print and (min-width: 6in);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?@media not screen and (monochrome);//除單色屏幕外的所有設(shè)備腊脱，monochrome://單色屏幕? ? ? ? ? ?@media only screen and (min-width: 401px) and (max-width: 600px);//向早期瀏覽器隱藏媒體查詢 -> 因?yàn)闆](méi)有only這樣的媒體類型，所以樣式表被忽略;//早期瀏覽器不能識(shí)別龙亲，所以忽略此樣式
(3).分辨率/像素 ->?設(shè)備像素比dpr =?物理像素/設(shè)備獨(dú)立像素陕凹；window.devicePixelRatio;//可查看dpr
分辨率變大 ->?同樣的元素 ->?分拆四個(gè)位置放置 ->?更加清晰
(4).相對(duì)單位/絕對(duì)單位：
補(bǔ)充：微信小程序中使用的相對(duì)單位rpx -> web網(wǎng)頁(yè)開(kāi)發(fā)中不使用，聚焦小程序 ->小程序中默認(rèn)所有機(jī)型寬為750rpx,高為1334rpx,例如iphone6 375px*750px,那在iphone6上1px=2rpx;?也就是若一張圖片設(shè)置12px*12px,iphone6的小程序開(kāi)發(fā)中需設(shè)置為24rpx*24rpx; ->1rpx =?屏幕寬度(px)/750;
- - - >>>響應(yīng)式開(kāi)發(fā)是很重要的思想鳄炉，但實(shí)戰(zhàn)開(kāi)發(fā)中往往做不到開(kāi)發(fā)一套源代碼杜耙，兼容所有網(wǎng)頁(yè)；
3拂盯、企業(yè)級(jí)應(yīng)用響應(yīng)式開(kāi)發(fā)手段
漸進(jìn)增強(qiáng)：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面佑女，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果磕仅、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)? ->先滿足低版本基礎(chǔ)功能珊豹，再向上兼容 ->例如iphone6，然后再開(kāi)發(fā)iphone 7,8等
優(yōu)雅降級(jí)：先構(gòu)建完整的功能榕订，然后再針對(duì)低版本瀏覽器進(jìn)行兼容店茶。
設(shè)備選擇：先移動(dòng)端后PC端 ->移動(dòng)端往往以iphone6為初始原型，再開(kāi)方其它版本也就是漸進(jìn)增強(qiáng)
?- - - >>>選擇 "漸進(jìn)增強(qiáng)" OR "優(yōu)雅降級(jí)" -> 需要從不同維度來(lái)分析考量：項(xiàng)目預(yù)算(人力劫恒、財(cái)力贩幻、時(shí)間成本等)、目標(biāo)用戶两嘴、產(chǎn)品定位等丛楚；
