《響應式web設計實踐》筆記

1.什麼是響應式設計：

針對任意裝置對網頁內容進行完美布局的一種顯示機制。

響應式**設計(responsive web design)的理念是：

頁面的設計與開發應當根據使用者行為以及裝置環境(系統平台、螢幕尺寸、螢幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、、css media query的使用等。無論使用者正在使用筆記本還是ipad，我們的頁面都應該能夠自動切換解析度、尺寸及相關指令碼功能等，以適應不同裝置；換句話說，頁面應該有能力去自動響應使用者的裝置環境。響應式網頁設計就是乙個**能夠相容多個終端——而不是為每個終端做乙個特定的版本。這樣，我們就可以不必為不斷到來的新裝置做專門的版本設計和開發了

2.什麼是自適應設計？

自適應是針對每乙個尺寸（320，640，960......）的裝置寫不同的js和css,甚至頁面也不同，斷點比較硬，不平滑。響應式是自適應的一種。

思考：錄播系統的部分想法屬於自適應：pc端乙個樣式，移動端乙個樣式，頁面結構不相同。但是在pc或者移動端各自的樣式中又採用了百分比布局來等比的放大或者縮小。

3.兩者的區別：

思考：我們5.0中只需要實現所有pc端的適應，並且ucd只提供乙個固定寬度的切圖，這種情況使用什麼方式實現想要的效果，並且這種方式屬於哪種設計方式？？

先說實現方式：

如果只是針對pc端的不同大小的螢幕，則需要將元素按照百分比來設定，因為pc端所有螢幕上的結構是相同的，所以只是所佔寬度的要隨著螢幕尺寸的變化而拉伸。鑑於ucd給的是960固定尺寸的效果圖，那麼

每個元素將按照960的固定尺寸百分比來實現。最外層元素的寬高通過js動態或者css media query來得到。（這種實現方式存在誤差）

這種方式屬於正常的百分比布局，不是響應式或者自適應。自適應的話需要ucd提供多種不同的效果圖來對應大中小螢幕。

4.如何實現響應式設計？

（以上三點如果就此打住，則是自適應，根據要適配的裝置在**查詢中新增相應的斷點，然後寫與此對應的樣式）

流動布局實現平滑的縮放，**查詢約束範圍，修改細節，實現自適應。

5.響應式設計的瀏覽器相容解決方案?

第乙個： ie6,7,8不支援html5標籤導致寫出的頁面凌亂不堪，使用modernizr(前端的瑞士軍刀)來解決。

使用方法：

（2）引入js

modernizr做了什麼：

（1）給不支援html5的新標籤新增墊片指令碼

（2）檢測是否支援新特性，並新增一大推的類名

modernizr支援按需載入：

第二個：使用response.js來使ie6,7,8支援min-width/max-width的**查詢,使用條件注釋可以滿足只在特定的瀏覽器下載入這個js

第三個：漸進增強的例項，當視口縮小到600px以下時，導航欄堆疊（bootstrap有同樣的實現效果），menumobile.js指令碼可以實現這個效果，具體的實現方法結合modernizr的按需載入：

6.響應式的實現方式？

設定樣式為img

存在的問題

:需要準備一張足夠大和清晰的,以保證在任何裝置上都可以呈現,對於移動端來說,頻寬要求太高.

如果視口拉伸超過了的最大尺寸，就會變形，所以可以給新增閾值：比如我們提供的這個是400*200的高畫質大圖，設定父類的width:30%,為防止上述現象，新增max-width:400px;這樣就會在 400px內自由縮放，不會出現拉伸變形。

舉例:html：

css:

.mainimg .hero-pit

《響應式web設計實踐》筆記

《響應式Web設計實踐》一1 2 小結

響應式web設計

響應式web設計

相關推薦