響應式網頁設計是什麽？

響應式網頁設計（RWD）是一種網頁設計方法，可使網頁在各種設備以及窗口或螢幕尺寸上都能很好地呈現。最近的工作也將觀看者的接近度作為觀看上下文的一部分視為RWD的擴展。所有設備上的內容，設計和性能都是必需的，以確保可用性和滿意度。

設計成具有RWD A位點通過使用流體，基於比例的網格適配佈局到視聽環境，靈活的圖像和CSS3 媒體查詢，通過@media以下方式擴展了規則：

流體網格概念要求頁面元素的大小以相對單位（例如百分比）而不是xxx單位（例如pixel或points）為單位。

柔性圖像的大小也以相對單位為單位，以防止它們顯示在其包含元素之外。

媒體查詢允許頁面根據要在其上顯示站點的設備的特徵（例如，渲染表面的寬度（瀏覽器窗口的寬度或物理顯示大小））使用不同的CSS樣式規則。

響應式佈局會自動調整並適應任何設備的屏幕尺寸，無論是桌上型電腦、筆記本電腦、平板電腦還是手機。

響應式網頁設計變得越來越重要，因為行動流量現在已占Internet總流量的一半以上。因此，谷歌在2015年宣布了Mobilegeddon，並開始提高如果搜索是通過行動裝置進行的，則這些網站對行動裝置友好。響應式網頁設計是用戶界面可塑性的一個示例。

響應式網頁對SEO的影響

SEO中的響應式網頁設計使訪問者可以輕鬆瀏覽您的網站。無論設備是什麼。它可以為您的網站提供更好的用戶體驗，因為他們可以隨時隨地獲取訊息。如果您的網站沒有響應式網頁設計，則Google將因提供不良的用戶體驗而受到處罰。

注意：儘管您的網站設計良好，但是如果您的頁面在智慧型手機上沒有響應且對行動裝置不友好，則無法在SERP（搜尋引擎結果頁面）上排名更高。

相關概念 

行動優先、順暢的JavaScript和漸進增強

「行動優先」，順暢的JavaScript和漸進式增強是RWD之前的相關概念。基本手機的瀏覽器不了解JavaScript或媒體查詢，因此建議的做法是創建一個基本網站並為智慧型手機和個人計算機對其進行增強，而不是依靠優雅的降級來製作複雜的圖像-手機上的繁重現場工作。

基於瀏覽器、設備或功能檢測的漸進增強

由於使用行動裝置的大量網際網路流量，它們不再被忽略。2014年，通過行動裝置訪問網際網路的用戶首次超過了台式機。網站必須支持缺少JavaScript的基本行動裝置時，瀏覽器（「用戶代理」）檢測（也稱為「 瀏覽器嗅探 」）和行動裝置檢測是兩種推論的方法：支持CSS和CSS功能（作為漸進增強的基礎）—但是，除非與設備功能資料庫一起使用，否則這些方法並不完全可靠。

對於功能更強大的手機和PC，流行的JavaScript框架（如Modernizr，jQuery和jQuery Mobile）可以直接測試瀏覽器對HTML / CSS功能的支持（或識別設備或用戶代理）。Polyfills可用於在Internet Explorer上添加對功能的支持，例如，支持媒體查詢（RWD需要），並增強HTML5支持。特徵檢測可能也不是完全可靠的。有些人可能會報告某個功能可用，如果該功能缺失或實施不佳，以至於實際上無法使用。

挑戰和其他方法

Luke Wroblewski總結了RWD和行動設計中的一些挑戰，並創建了多設備佈局模式的目錄。他建議，與簡單的RWD方法相比，設備體驗或RESS（帶有伺服器端組件的響應式Web設計）方法可以為行動裝置提供更好的用戶體驗。諸如Sass或Incentivated的MML之類的樣式表語言的伺服器端「 動態CSS 」實現可以通過訪問基於伺服器的API來實現，該方法結合處理設備（通常是手機）的差異設備功能資料庫，以提高可用性。RESS的開發成本更高，不僅需要客戶端邏輯，因此傾向於保留給預算較大的組織。與其他方法相比，Google建議對智慧型手機網站進行自適應設計。

儘管許多發布商開始實施響應式設計，但RWD面臨的一項持續挑戰是某些橫幅廣告和視頻不夠流暢。但是，搜索廣告和（橫幅）展示廣告支持特定的設備平台定位以及台式機，智慧型手機和基本行動裝置的不同廣告尺寸格式。不同的登陸頁面 URL可以用於不同的平台或Ajax可以用於在頁面上顯示不同的廣告變體。 CSS表允許混合固定+流體佈局。

現在有很多驗證和測試RWD設計的方法，從行動站點驗證器和行動仿真器到同時測試工具（如Adobe Edge Inspect）。Chrome，Firefox和Safari瀏覽器以及Chrome控制台提供了響應設計視口大小調整工具，第三方也是如此。

隨著行動裝置使用量的增加，RWD的用例現在將進一步擴展。Statista的數據顯示，來自行動裝置的美國自然搜尋引擎訪問量已經達到51％，並且還在不斷增加。