什麼是響應式網頁設計：了解基礎知識
已發表: 2015-06-25今天，作為用戶，我們一直在路上。 大多數網站訪問都是在移動設備上開始的，根據 eMarketer 的說法，美國零售業的 Mcommerce 銷售額將逐年增加。 因此，為了讓所有企業保持相關性，優化平板電腦、智能手機和所有可以想像的設備上的網站可訪問性和用戶體驗變得越來越重要。 為了適應用戶，響應式設計的網站通常是最好的選擇。
響應式設計是一種 Web 開發方法，通過該方法，網站被規劃、設計和開發，以在一系列設備中以最佳方式顯示。 短語“以最佳方式顯示”是指頁面可讀、易於導航、可用最少的平移和滾動。 響應式設計不僅僅是一種方法或技術 - 它是關於如何設計和構建網站的基本意識形態。
什麼是響應式網頁設計？
響應式設計是一種前端開發過程，旨在將網站設計和用戶體驗塑造到用戶的設備上，無論是台式機、平板電腦還是移動設備。 在響應式中，級聯樣式表（CSS）——本質上定義了網頁的格式和佈局，被利用來允許網站縮放到瀏覽器的寬度，而與設備類型無關。 Javascript 和 js 庫（如 JQuery 和 Modernizr）也用於伴隨此行為，以調整更多動態對象（如砌體畫廊）的大小以及將鼠標活動轉換為觸摸活動。 與自適應設計或移動檢測不同，響應式設計不利用設備檢測，因此 CSS 媒體查詢不是使用後端邏輯查詢設備，而是用於確定設備屏幕（您的瀏覽器）的寬度和方向等內容。
響應式設計基礎
響應式設計中存在兩個基本原則，即使用斷點和流體縮放：
CSS3 媒體查詢創建條件邊界，特定設備類型的瀏覽器的寬度將在該邊界處觸發替代樣式。 在 Blue Fountain Media，我們通常使用最大寬度斷點來創建桌面優先（縮小）構建，而不是最小寬度邊界，用於移動優先（放大）構建。 查詢也可用於確定高度甚至設備方向。 斷點大小（我們將從這裡開始使用寬度）可以設置為 px 或 em。 不過，與幾年前相比，現代瀏覽器的差異可以忽略不計。 斷點可以設置為任何大小，但它們傾向於與每個桌面、平板電腦縱向、移動橫向和移動縱向的最常見尺寸保持一致。 一般來說，這些寬度往往分別為 1200/960 像素、768 像素、480 像素和 320 像素，儘管隨著新設備的發布，行業標準會不斷變化。 多年來，這些類型的設備已經開始相互融合，尤其是隨著視網膜顯示器的推出。 結果，您可能會發現兩個設備可以匹配相同的斷點（即平板電腦景觀和筆記本電腦），但也可能會發現特定設備具有獨特的尺寸，所以這就是下一個原則發揮作用的地方。
流體縮放可以通過幾種不同的方式實現，但它總是涉及百分比或 em 值，以允許容器在其父元素的範圍內進行縮放，最終在瀏覽器的範圍內進行。 流體縮放對於實現斷點之間的響應性、最大化您的空間以及在響應式網格中保持列的流動是必要的。 流體縮放對象的一個簡單示例是一個 HTML 頁面，該頁面由一個寬度為 % 且高度為“自動”的塊組成。 當瀏覽器改變寬度時，塊會按比例縮放。 您選擇在何處應用此縮放取決於您，但流動性應始終存在於任何響應容器的頂層。 另一個流行的流動性例子是網格佈局。 在網格佈局中，虛擬塊對齊並均勻分佈在站點或容器的主體寬度上。 這些塊的寬度是固定的，作為內聯塊對齊，並帶有一個可以流暢縮放的父容器。 通過這樣做，當瀏覽器（最終是容器）到達所有塊的總和超過其父容器的點時，塊會中斷到下一行。 這些塊被稱為列，每個塊也可以代表許多列。 例如，如果您有 3 個塊，它們可以代表 9 列，每列 3 列。 一旦您縮小到適合 2 個塊的寬度，每個 3 列，下一行是第 3 個，您現在看到的是 8 列佈局，有 2 列邊距。 進一步縮小以關閉邊距，您將看到沒有邊距的 6 列佈局。
網格佈局也可用於整個網站，包括側邊欄和正文內容。 因此，許多網站都是在網格上設計的，從左到右、從上到下（就像日耳曼語和拉丁語的書面語言一樣）。 為了呈現網格的最佳響應佈局，我們首先從斷點的知識中選擇已知的設備寬度。 使用這些數字，我們計算了站點寬度和列數的最接近的數字，它們分為最大數量的整體因素。 我們必須做到這一點，同時不會過多地損害內容的真實性（所以不要過火）。 最流行的系統之一是 960grid 系統，通常用於 12 列。 因此，佔據頁面全寬的兩個並排塊分別為 6 列和 6 列，在 12 列網格中。
在為響應式設計和開發時，我們強調保留從桌面到移動的元素的結構和順序。 這允許流體縮放，同時還減少了在特定斷點處隱藏或顯示的重複元素的不必要負載。
Blue Fountain Media 的響應式設計
在 Blue Fountain Media，我們 2015 年的響應式設計標準包括標準 960 網格選項，需要針對台式機和移動設備進行設計，以及寬屏 1200 像素或 1280 像素網格需要針對寬屏、平板電腦或 960 和移動設備進行設計。 所有中間階段要么通過斷點捕捉到下一個斷點大小，要么流暢地縮放——設計的複雜性和項目的範圍將決定這一決定。 我們才華橫溢的開發團隊包括全棧開發人員和前端專家，他們都接受過響應式實踐培訓，並每季度接受一次評估。 我們手動執行所有主要瀏覽器和上述斷點寬度的質量檢查，並使用基於 PhantomJs 構建的專有屏幕截圖服務，以及與我們內部的 QA 工程師進行手動設備測試。
優化用戶體驗
無論您的行業或公司提供的產品和服務如何，您網站上的用戶體驗都應該是最重要的。 通過響應式設計，您的受眾將始終能夠在任何給定時間在他們的每台設備上與您的網站無縫互動。 移動設備和平板電腦的使用正變得越來越普遍，並且要在您的在線形像上取得成功，您的網站應該針對這些設備及其用戶進行優化。