饿了么骑手兼职app

書名：企業互聯網架構原理與實踐
作者名：富亞軍編著
本章字數： 1611字
更新時間： 2021-08-12 18:32:55

3.3 響應式網站設計

響應式網站（Responsive Web Design，縮寫為RWD）是指用戶頁面根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相應的響應和調整，自動切換分辨率、圖片尺寸及相關腳本功能以適應不同設備。響應式網頁設計就是一個網站能夠兼容多個終端而不是為每個終端做一個特定的版本。響應式網站設計包括響應式HTML、響應式布局、響應式圖片、響應式CSS、響應式JS等。

進行響應式設計首先需要了解User Agent與media query。

（1）User Agent

User Agent即用戶代理，簡稱UA，是一個特殊字符串頭，使服務器能夠識別客戶使用的操作系統及版本、CPU類型、瀏覽器及版本、瀏覽器渲染引擎、瀏覽器語言、瀏覽器插件等。

（2）media query

在CSS中可以使用media query來判斷不同的媒體類型引入的樣式和腳本。如：

上面的media語句表示：當寬度小于或等于500px時，調用col-md-4.cs樣式表渲染頁面。其中：

（1）screen：媒體類型，包括screen（屏幕）、print（頁面打印或打印預覽模式）等10余種類型。

（2）and：關鍵詞，與其相似的還有not，only等。

（3）max-width:600px：媒體特性（媒體條件），如最小寬度是min-width，除了寬度還可以判斷顏色等。

3.3.1 服務端響應與客戶端響應

對于用戶行為和設備環境的響應判斷有兩種方式，客戶端判斷和服務端判斷。客戶端判斷是指在瀏覽器端通過CSS中的media query進行判斷或使用JS判斷User Agent。服務端判斷是指客戶端提交User Agent到服務端，服務端判斷User Agent請求信息后輸出。

（1）PC端與移動端的HTML結構差距較大時，如PC顯示出更多的字段，進行更加適用于鼠標操作的業務，此時適用于服務端判斷，由服務端輸出PC與移動兩套頁面。

（2）PC端與移動端的HTML結構差距不大的，可以輸出一套頁面，由前端自適應。HTML的結構差異可以結合響應式JS和CSS、響應式圖片和響應式布局進行變化處理。但因為移動端處理能力有限，需要保證移動端資源最小化，有沖突的條件下要優先照顧移動端，而PC端可以適當冗余。

3.3.2 響應式JS

設置PC端和移動端兩套JS。有兩種判斷并輸出的方式，一是使用media query判斷媒體類型適應設備，或使用JS判斷User Agent；二是在服務端判斷User Agent，直接輸出。

3.3.3 響應式CSS

設置適應小、中、大等不同屏幕的樣式。有兩種判斷并輸出的方式，一是使用media query判斷媒體類型適應設備。二是在服務端判斷User Agent，直接輸出。

3.3.4 響應式圖片

根據不同屏幕大小和分辨率設置多套圖片。有兩種判斷并輸出的方式，一是使用media query判斷媒體類型適應設備。二是在服務端判斷User Agent，直接輸出。

3.3.5 響應式布局

布局是響應式網站的核心。

（1）使用Grid布局

CSS的布局模式包括table布局、float浮動布局、flex-box布局、Grid布局等等。以flex-box布局和table比較，相當于把table中的單元格拿出來，作為一個箱子，flex-box可以對箱子的擺放進行規劃，也可以把箱子看成Word軟件中的一個漢字，flex-box的布局（display）就是Word中的漢字排版功能，所以布局方式更加靈活。

相比使用flex-box布局進行響應式設計，使用Grid布局可以更加精確。Grid布局相當于田字格本，布局過程就是在田字格上定義業務區域占用的單元格位置，如圖3-7所示。

圖3-7 Grid布局

例如在Bootstrap中，把網頁分為12列，設置適應超小、小、中、大等不同屏幕的樣式。如圖3-8所示。

圖3-8 Bootstrap的布局模式

Bootstrap的響應式網格布局見https://v4-alpha.getbootstrap.com/layout/grid/。使用media query判斷設備大小變化，應用不同的樣式，樣式中的列寬和間距做出相應的改變，其中列寬使用百分數，而間距gutter使用px或rem。如果屏幕太小，則在樣式中將寬度統一設置為100%。例如：

（2）使用REM布局

在CSS中px、em、rem都是計量單位，都能表示尺寸。px表示“絕對大小”，是CSS中定義的像素（與顯示器像素有區別），利用px設置字體大小及元素寬高等比較穩定和精確，但其不能隨瀏覽器縮放產生變化。em表示相對尺寸，相對于當前對象內文本的font-size（如果當前對象內文本的font-size計量單位也是em，則當前對象內文本的font-size的參考對象為父元素文本font-size）。rem也表示相對尺寸，其參考對象為根元素<html>的font-size（默認是16px）。所有元素使用rem定義大小，根據media query查詢屏幕大小并設置不同的根font-size，這樣屏幕大小變化時，根font-size也會變化，布局比例就會根據rem進行縮放。

某些瀏覽器還支持使用Zoom按屏幕進行縮放，但zoom是全局的配置，而rem可以配置到html元素上，更加靈活。

官术网_书友最值得收藏!