響應式開發

1.什麼是響應式開發

顧名思義，同乙個**相容不同的大小的裝置。如pc端、移動端（平板、橫屏、豎排）的顯示風格。描述響應式介面最著名的一句話就是「content is like water」，翻譯成中文便是「如果將螢幕看作容器，那麼內容就像水一樣」。

因為市面上出現了越來越多的智慧型移動裝置，「主流裝置」的概念正在消失，同一張在不同裝置上看起來，大小可能天差地別。如果因此乙個網頁需要考慮到不同端的解析度，使用者的使用習慣。因此,響應式web設計的出現,其可用性被大大提高,無論是在哪個使用者端,使用者都可以按照自己的使用習慣瀏覽頁面，減少使用時發生錯誤的機率，從而獲得更好的使用者體驗。

1、同一頁面在不同大小和比例上看起來都應該是舒適的；

2、同一頁面在不同解析度上看起來都應該是合理的；

3、同一頁面在不同操作方式（如滑鼠和觸屏）下，體驗應該是統一的；

4、同一頁面在不同型別的裝置（手機、平板、電腦）上，互動方式應該是符合習慣的。

gumby framework

gumby 2是建立在sass基礎上的。sass是一款非常強大的css 預處理器，允許使用者自主快速的開發擴充套件gumby，同時提供很多新的工具來自定義和擴充套件gumby框架。gumby 2是乙個非常棒的響應式css框架。

get ui kit

get ui kit是一款輕量級、模組化的前端框架，可快速構建強大的web前端介面，而且，它是一款開源的前端ui介面的框架，可以無任何限制的使用uikit 來建立自己的風格。

foundation

foundation是乙個易用、強大而且靈活的框架，用於構建基於任何裝置上的web應用。提供多種web上的ui 元件，如表單、按鈕、 標籤等。

semantic

ui是web的靈魂！semantic是為工程師而製作的可復用的開源前端框架。提供各種ui元件，使得開發更加直觀、易於理解。

52framework

52 framework主要用於優化html5和css3的跨瀏覽器相容性的框架，可在所有主流瀏覽器上執行。

purecss

pure是一組小的、響應式css模組，可用於任意web專案中。它可作為每個**或web應用的起步工具，幫助開發者處理應用程式所需的所有css工作，同時不會讓每個應用千篇一律。

responsablecss

responsable使用最少的sass，帶給你最完美的響應式框架。

tuktuk

tuktuk支援**重用功能，提供更加快速、高效的樣式列表，易於新增與維護。

kube

kube是全球最為流行、最靈活的css框架之一。其帶給你最強大的功能選擇，極具創意性與美觀性。

ivory

ivory是一款強大、靈活、易用的響應式框架。 ivory基於12列的響應式網格布局，包含**，按鈕，**，分頁，撥動開關，工具提示，手風琴，選項卡等**中常用的元件和樣式。

mashable主頁

a flexible grid

bootstrap中文網

a flexible grid 案例

螢幕較大(pc，mac)顯示

螢幕較小(平板)顯示

螢幕小（手機）顯示

響應式開發

現在的自由響應式的html5模板的有著高度的市場需求，因為他們完全改變了 設計與開發工業來說，是比較容易的，順手，高階語言，可以很容易地建立了很多令人驚訝的事情，很快。這些模板是易於定製，有很多不同的特點。響應式html5模板不僅是高質量的而且看起來偉大在每個裝置的顯示器，在這個時代的玩意兒片是至關...

簡單了解響應式開發

1.響應式布局 web網頁開發的頁面布局大致出現了以下幾類 2.響應式開發因此我們要學會針對不同的 選擇不同的開發方式，對於一些部落格 官網 新聞等 展示內容單一簡單，適合使用響應式開發，但是針對一些功能複雜的 則不適合。實現響應式布局的乙個方法是使用 查詢，查詢即針對不同的裝置使用不同的 一般的常...

響應式開發學習筆記

media 型別 and 特性 max width 是 特性中最常用的乙個特性，其意思是指 型別小於或等於指定的寬度時，樣式生效。如 media screen and max width 480px 上面表示的是 當螢幕小於或等於480px時,頁面中的廣告區塊 ads 都將被隱藏。min width...