聊聊響應式佈局（Responsive Design）

起因

最近接觸響應式佈局是在思漩的作業上，她詢問的如何完成響應式的佈局。這次也是我第一次真正動手實踐和去了解響應式佈局。

這裡說明一下，之前總是說自己會前端，其實會的也都只是簡單的HTML和CSS，之前做的小專案是沒有接觸過響應式的，只是一個HTML和CSS的熟練工，連H5和CSS3，還有JS，因為知道的越來越多，也不敢說自己已經掌握了。只能按照自己目前的技能等級定位為瞭解。

• 目的：打算對響應式佈局來一個系統的認識，能夠理解響應式設計的基礎概念以及歷史。
• 前提：學習過HTML基礎，對CSS工作方式有過簡單的理解

查閱的資料

MDN：響應式設計-

MDN：CSS佈局-https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout

這些資料很棒，我沒有將內容知識遷移。自行查閱。

何為響應式佈局？

官方解釋如下：

隨著越來越多的螢幕尺寸出現在支援Web的裝置上，響應式Web設計（RWD）的概念出現了：一組允許網頁改變其佈局和外觀以適應不同的螢幕寬度、解析度等的實踐。

1. 在我看來:

   響應式佈局的核心就是“響應”。那麼何為響應呢？簡單的理解就是“在合適的場景，看到合適的頁面。如在PC端看到的頁面，如果平移到手機端，能夠自動調節為手機要看到的樣式”。這其實也就是響應式。

   或者是通過JS來監控螢幕的解析度，從

2. 瞭解到響應式只是CSS基本佈局中的一種。能與之同級的概念有：

   • 正常佈局流
   • 彈性盒
   • 網格
   • 浮動
   • 定位
   • 多列布局
   • 響應式佈局
   • 流媒體查詢
   • 傳統佈局

3. 之前我做網頁開發的時候，第一步我也會先考慮是使用哪種架構，是建立一個“固定寬度”的站點，還說做一個響應式佈局（只想過沒做過）。

響應式實現原理

根據螢幕的解析度，呼叫不同的樣式。

1. 通過CSS計算螢幕大小來控制的：

   @media screen and (min-width: 992px)
   .layui-col-md3 {
       width: 25%;
   }
   

2. 視口元標籤

   <meta name="viewport" content="width=device-width,initial-scale=1">
    
   

我們的實現

我們使用的是LayUI框架裡面的柵格化佈局，通過框架內部提供的樣式，來完成各個畫素下對應的屏佔比和顯示的內容。

引用：https://www.layui.com/doc/element/layout.html

細節：就是說在同一個Div上引用不同模式的屏佔比，在瀏覽器監控到螢幕大小的時候，就會自動響應對應的比例。

<div class="layui-container">  
  常規佈局（以中型螢幕桌面為例）：
  <div class="layui-row">
    <div class="layui-col-md9">
      你的內容 9/12
    </div>
    <div class="layui-col-md3">
      你的內容 3/12
    </div>
  </div>
   
  移動裝置、平板、桌面端的不同表現：
  <div class="layui-row">
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移動：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
      移動：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
      移動：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
      移動：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
      移動：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>
</div>

總結

這裡只是對響應式進行了初步的瞭解，如果想成為熟練工，那肯定是需要動手去做Demo，去實操的。不然很容易造成眼高手低的現象。

通過本次瞭解之後，如果以後順路看到響應的響應式文章，我就可以點進去看看是不是和我的想法一樣，對自己的這個知識點進行查漏補缺。雖然我不是從事前端研發工作，但是，學習瞭解這些，好像對後端也是相輔相成的。對於我的程式設計師道路，有益無害。