最近接觸響應式布局是在思漩的作業上，她詢問的如何完成響應式的布局。這次也是我第一次真正動手實踐和去了解響應式布局。
這裡說明一下，之前總是說自己會前端，其實會的也都只是簡單的html和css，之前做的小專案是沒有接觸過響應式的，只是乙個html和css的熟練工，連h5和css3，還有js，因為知道的越來越多，也不敢說自己已經掌握了。只能按照自己目前的技能等級定位為了解。
mdn：響應式設計-
mdn：css布局-
這些資料很棒，我沒有將內容知識遷移。自行查閱。
官方解釋如下：在我看來:隨著越來越多的螢幕尺寸出現在支援web的裝置上，響應式web設計（rwd）的概念出現了：一組允許網頁改變其布局和外觀以適應不同的螢幕寬度、解析度等的實踐。
響應式布局的核心就是「響應」。那麼何為響應呢？簡單的理解就是「在合適的場景，看到合適的頁面。如在pc端看到的頁面，如果平移到手機端，能夠自動調節為手機要看到的樣式」。這其實也就是響應式。
或者是通過js來監控螢幕的解析度，從
了解到響應式只是css基本布局中的一種。能與之同級的概念有：
之前我做網頁開發的時候，第一步我也會先考慮是使用哪種架構，是建立乙個「固定寬度」的站點，還說做乙個響應式布局（只想過沒做過）。
根據螢幕的解析度，呼叫不同的樣式。
通過css計算螢幕大小來控制的：
@media screen and (min-width: 992px)
.layui-col-md3
視口元標籤
我們使用的是layui框架裡面的柵格化布局，通過框架內部提供的樣式，來完成各個畫素下對應的屏佔比和顯示的內容。
引用：細節：就是說在同乙個div上引用不同模式的屏佔比，在瀏覽器監控到螢幕大小的時候，就會自動響應對應的比例。
常規布局（以中型螢幕桌面為例）：
你的內容 9/12
你的內容 3/12
移動裝置、平板、桌面端的不同表現：
移動：6/12 | 平板：6/12 | 桌面：4/12
移動：6/12 | 平板：6/12 | 桌面：4/12
移動：4/12 | 平板：12/12 | 桌面：4/12
移動：4/12 | 平板：7/12 | 桌面：8/12
移動：4/12 | 平板：5/12 | 桌面：4/12
通過本次了解之後，如果以後順路看到響應的響應式文章，我就可以點進去看看是不是和我的想法一樣，對自己的這個知識點進行查漏補缺。雖然我不是從事前端研發工作，但是，學習了解這些，好像對後端也是相輔相成的。對於我的程式設計師道路，有益無害。
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...