去年上半年，我開始著手推動專案中響應式設計的落
地。以官網優化需求為契機，主動去做了響應式的頁面設計，也說服了產品、設計和開發的www.cppcns.com相關同事一起把它上線落實，但不幸的是，由於各種方面的原因，比如，
生搬硬套的pc模組，無差異化的設計使得移動端閱讀不佳，導航相容性有限等等原因，上線幾個月後又悄然下線。我不禁反思，專案中是否應該推
行響應式？今年年初重新啟動了全站響應式專案kmyda，從產品、互動、視覺到開發，各個角色全方面參與了響應式專案，最終門戶的頁面實現全面響應式。在專案過程中
有技術沉澱，也有不少的思考，也就有了以下的文字。文章的內容圍繞四個方面，響應式的概念，實踐方法，一些案例，以及一些看法。
ehan marcotte 為a list apart寫過一篇介紹型的文章 &kmydalt;響應式網頁 。文中講到響應式的概念源自響應式建築設計，即房間或者空間會根據其內部人群數量和流動而變化。
[最近一門新興的學科「響應式建築(responsive
architecture)」開始在**物理空間根據流動於其中的人進行響應的方法。建築師們通過把嵌入式機械人與可拉伸材料結合的方法，嘗試藝術裝置和
可彎曲、伸縮和擴充套件的牆體結構，達到根據接近人群的情況變化的效果。運動感測器與氣候控制系統相結合，調整圍繞人們周圍的房間的溫度以及環境照明。已經有
公司製造了「智慧型玻璃技術」，當室內人數達到一定的閥值時，它可以自動變為不透明狀態，為人們提供更多隱私保護。]
web響應式設計的概念與之也非常相似。在如今技術飛快發展的時代，一向是以快論英雄，裝置和解析度日新月異，就以分類相對明晰的iphone為例，就有多達4種的解析度和螢幕尺寸，更別提廠商蓬勃發展的安卓機領域。因此，為每種裝置或者特定裝置解析度制定相應的獨立版本是非常費時費力的事情。
web響應式設計的理念，應當是，頁面可以根據使用者的裝置環境，包括系統，解析度，螢幕尺寸等等因素，進行自發式調整，提供更適合當前環境的閱讀和操作體驗，對已有和未來即將出現的新裝置有一定的適應能力。
有了概念，一定要談談實現的方法。類似於響應式建築，web頁面也有對應關鍵因素。
以上給了我寫文章的脈絡結構靈感，於是先從最基礎的布局談起。
有一種流體布局的概念在早起web興起的時，就開始盛行了。它的概念是說頁面會根據瀏覽器視窗的變化進行更改，**可以通過維護一套**，保質一致性的設計。我這裡強調的可擴充套件的布局也是基於這個概念，只是現在的方法多種多樣，因此要強調頁面布局的可擴充套件性。
可擴充套件的布局途徑有很多，比如常見的百分比布局，以及一直未成為標準的柵格布局等等。
就從這框架來說，以乙個常見的可擴充套件的三欄布局為例，就有數十種方法，這裡拋磚引玉舉幾個例子。
方法1：
demo1
方法2：
demo2
方法3：
demo3
方法4：
demo4
方法5：
demo5
方法6：
demo6
方法7：
demo7
方法8：
demo8
方法9：
demo9
除了上述總結的幾種，還有更多更多的方法。兩欄布局同理就不贅述。
此外w3c也有乙個柵格化布局（grid程式設計客棧 layout）的規範，這個布局是基於兩維柵格系統設計的，可以輕鬆按照我們的意願改變頁面的設計。它與flexbox配合效果更佳。但目前仍處於草案階段。翻看了w3c的最新草案內容，對grid layout的使用方法和原理簡單介紹下。
1）定義grid：
首先在grid item外的父級容器上定義display: grid.
values：
2）一些相關概念：
3）grid item 屬性
了解了一些基本概念後，就可以更加絨裡理解相關的grid item屬性。
這四個屬性中，grid-column-start和grid-row-start指明區域起始線，grid-column-end和grid-row-end指明區域結束線。這四個屬性均有以下四個值可取。
values：
舉個例子：
代表的區域就是：
除以上提到，grid還擁有更多的屬性，使之可以定義grid item的寬高，間隙，內部自適應的方式，對齊方式等等。更多屬性可以參考w3c文件。
4）瀏覽器支援：
令人遺憾的是，瀏覽器的支援度還未盡人意，未來在ua上獲取更多支援才是grid發展的根本。
框架搭建好，才僅僅是響應式的開始。但是俗語有云：well begun is half done. 響應式從做好的布局開始。
本文標題: 響應式web設計 – 布局
本文位址:
響應式web布局
通過不同的 型別和條件定義樣式表規則，查詢讓css可以更精確作用於不同的 型別和同一 的不同條件。查詢的大部分 特性都接受min和max用於表達 大於或等於 和 小與或等於 如 width會有min width和max width 查詢可以被用在css中的 media和 import規則上，也可以被...
web前端 響應式布局
隨著移動裝置的流行，網頁設計必須要考慮到移動端的設計。同乙個 為了相容pc端和移動端顯示，就需要進行響應式開發。利用 查詢，讓同乙個 相容不同的終端 pc端 移動端 呈現不同的頁面布局。css3 media查詢 用於查詢裝置是否符合某一特定條件，這些特定條件包括螢幕尺寸 是否可觸控 螢幕精度 橫屏豎...
響應式設計布局
簡單說呢就針對不同的螢幕解析度應用不同的css樣式。比如在電腦 pad裝置上，螢幕比較寬，就可以一行放2個div。到了手機上，或者pad豎著拿的的時候，一行就只放1個div。這裡有2個關鍵點 以上兩點都應該不依賴與js。實現第一點依靠的是流式布局。就是所有參與布局的div都用float left，寬...