響應式設計？響應式設計的基本原理是什麼？如何做？

喆星高照發表於2021-04-16

一、是什麼

響應式網站設計（Responsive Web design）是一種網路頁面設計佈局，頁面的設計與開發應當根據使用者行為以及裝置環境(系統平臺、螢幕尺寸、螢幕定向等)進行相應的響應和調整

描述響應式介面最著名的一句話就是“Content is like water”

大白話便是“如果將螢幕看作容器，那麼內容就像水一樣”

響應式網站常見特點：

  • 同時適配PC + 平板 + 手機等

  • 標籤導航在接近手持終端裝置時改變為經典的抽屜式導航

  • 網站的佈局會根據視口來調整模組的大小和位置

 

 

二、實現方式

響應式設計的基本原理是通過媒體查詢檢測不同的裝置螢幕尺寸做處理，為了處理移動端，頁面頭部必須有meta宣告viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

屬性對應如下：

  • width=device-width: 是自適應手機螢幕的尺寸寬度

  • maximum-scale:是縮放比例的最大值

  • inital-scale:是縮放的初始化

  • user-scalable:是使用者的可以縮放的操作

實現響應式佈局的方式有如下：

  • 媒體查詢
  • 百分比
  • vw/vh
  • rem

媒體查詢

CSS3中的增加了更多的媒體查詢，就像if條件表示式一樣，我們可以設定不同型別的媒體條件，並根據對應的條件，給相應符合條件的媒體呼叫相對應的樣式表

使用@Media查詢，可以針對不同的媒體型別定義不同的樣式，如：

@media screen and (max-width: 1920px) { ... }

當視口在375px - 600px之間，設定特定字型大小18px

@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

通過媒體查詢，可以通過給不同解析度的裝置編寫不同的樣式來實現響應式的佈局，比如我們為不同解析度的螢幕，設定不同的背景圖片

比如給小螢幕手機設定@2x圖，為大螢幕手機設定@3x圖，通過媒體查詢就能很方便的實現

百分比

通過百分比單位 " % " 來實現響應式的效果

比如當瀏覽器的寬度或者高度發生變化時，通過百分比單位，可以使得瀏覽器中的元件的寬和高隨著瀏覽器的變化而變化，從而實現響應式的效果

height、width屬性的百分比依託於父標籤的寬高，但是其他盒子屬性則不完全依賴父元素：

  • 子元素的top/left和bottom/right如果設定百分比，則相對於直接非static定位(預設定位)的父元素的高度/寬度

  • 子元素的padding如果設定百分比，不論是垂直方向或者是水平方向，都相對於直接父親元素的width，而與父元素的height無關。

  • 子元素的margin如果設定成百分比，不論是垂直方向還是水平方向，都相對於直接父元素的width

  • border-radius不一樣，如果設定border-radius為百分比，則是相對於自身的寬度

可以看到每個屬性都使用百分比，會照成佈局的複雜度，所以不建議使用百分比來實現響應式

vw/vh

vw表示相對於檢視視窗的寬度，vh表示相對於檢視視窗高度。任意層級元素，在使用vw單位的情況下，1vw都等於檢視寬度的百分之一

與百分比佈局很相似，在以前文章提過與%的區別，這裡就不再展開述說

rem

在以前也講到，rem是相對於根元素html的font-size屬性，預設情況下瀏覽器字型大小為16px，此時1rem = 16px

可以利用前面提到的媒體查詢，針對不同裝置解析度改變font-size的值，如下：

@media screen and (max-width: 414px) {
  html {
    font-size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 12px
  }
}

為了更準確監聽裝置可視視窗變化，我們可以在css之前插入script標籤，內容如下：

//動態為根元素設定字型大小
function init () {
    // 獲取螢幕寬度
    var width = document.documentElement.clientWidth
    // 設定根元素字型大小。此時為寬的10等分
    document.documentElement.style.fontSize = width / 10 + 'px'
}

//首次載入應用，設定一次
init()
// 監聽手機旋轉的事件的時機，重新設定
window.addEventListener('orientationchange', init)
// 監聽手機視窗變化，重新設定
window.addEventListener('resize', init)

無論裝置可視視窗如何變化，始終設定rem為width的1/10，實現了百分比佈局

除此之外，我們還可以利用主流UI框架，如：element ui、antd提供的柵格佈局實現響應式

小結

響應式設計實現通常會從以下幾方面思考：

  • 彈性盒子（包括圖片、表格、視訊）和媒體查詢等技術
  • 使用百分比佈局建立流式佈局的彈性UI，同時使用媒體查詢限制元素的尺寸和內容變更範圍
  • 使用相對單位使得內容自適應調節
  • 選擇斷點，針對不同斷點實現不同佈局和內容展示

三、總結

響應式佈局優點可以看到：

  • 面對不同解析度裝置靈活性強
  • 能夠快捷解決多裝置顯示適應問題

缺點：

  • 僅適用佈局、資訊、框架並不複雜的部門型別網站
  • 相容各種裝置工作量大，效率低下
  • 程式碼累贅，會出現隱藏無用的元素，載入時間加長
  • 其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
  • 一定程度上改變了網站原有的佈局結構，會出現使用者混淆的情況

 

相關文章