福州響應式網頁設計是什么

響應式網頁設計（RWD）是一種網頁設計方法，可以使網頁在各種設備和窗口或屏幕尺寸上都能很好地呈現。最近的工作還將觀看者接近度視為觀看上下文的一部分，作為RWD的擴展。所有設備都需要內容，設計和性能，以確?？捎眯院蜐M意度。

使用RWD設計的網站通過使用流體，基于比例的網格，靈活圖像，和CSS3?媒體查詢，使布局適應觀看環境，該@media規則的延伸，以下列方式：

• 流體網格概念要求頁面元素大小調整為相對單位，如百分比，而不是像像素或點這樣的絕對單位。^[8]
• 靈活的圖像也以相對單位確定大小，以防止它們在其包含元素之外顯示。^[9]
• 媒體查詢允許頁面根據顯示網站的設備的特征使用不同的CSS樣式規則，最常見的是瀏覽器的寬度。

響應式網頁設計變得更加重要，因為移動流量現在占互聯網總流量的一半以上。^[15]?因此，谷歌在2015年宣布了Mobilegeddon，并且如果搜索是通過移動設備進行搜索，則開始提高移動友好網站的評級。^[響應式網頁設計是用戶界面可塑性的一個例子。

什么是響應式移動網頁設計

移動優先，不引人注目的JavaScript和漸進增強

“移動優先”，不引人注目的JavaScript和漸進增強是早于RWD的相關概念。^[18]基本手機的瀏覽器不了解JavaScript或媒體查詢，因此建議的做法是創建一個基本網站，并為智能手機和PC增強它，而不是依靠優雅的降級來制作復雜的，圖像重的網站在手機上工作。

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

由于移動設備上大量使用互聯網，因此無法再忽略它們。2014年，更多用戶首次使用移動設備訪問互聯網而非桌面設備。如果網站必須支持缺少JavaScript的基本移動設備，瀏覽器（“用戶代理”）檢測（也稱為“?瀏覽器嗅探?”）和移動設備檢測^[20]?[24]是推斷某些HTML的兩種方法支持CSS功能（作為漸進增強的基礎） - 但是，除非與設備功能數據庫結合使用，否則這些方法并不完全可靠。

對于功能更強大的移動電話和PC，可以直接測試瀏覽器對HTML / CSS功能的支持（或識別設備或用戶代理）的JavaScript框架，如Modernizr，jQuery和jQuery Mobile，很受歡迎。Polyfills可用于添加對功能的支持 - 例如，支持Internet Explorer上的媒體查詢（RWD所需）以及增強HTML5支持。特征檢測也可能不完全可靠;?有些人可能會報告某個功能可用，當它丟失或執行得太差以至于它實際上無法正常運行時。

挑戰和其他方法

Luke Wroblewski總結了一些RWD和移動設計挑戰，并創建了多設備布局模式的目錄。他建議，與簡單的RWD方法相比，設備體驗或RESS（具有服務器端組件的響應式網頁設計）方法可以提供針對移動設備更好地優化的用戶體驗。樣式表語言（如Sass或Incentivated的MML?^）的服務器端“?動態CSS?”實現可以通過訪問基于服務器的API來實現這種方法的一部分，該API處理設備（通常是移動手機）的差異使用設備功能數據庫以提高可用性。^[33]RESS的開發成本更高，需要的不僅僅是客戶端邏輯，因此往往會留給預算較大的組織。Google建議智能手機網站的響應式設計優于其他方法。

雖然許多出版商開始實施響應式設計，但RWD的一個持續挑戰是一些橫幅廣告和視頻不流暢。然而，搜索廣告和（橫幅）顯示廣告支持特定指定裝置平臺和不同的廣告大小格式桌面，智能電話，和基本移動設備。不同的登陸頁面?URL可用于不同的平臺，或Ajax可用于在頁面上顯示不同的廣告變體。CSS表允許混合固定+流體布局。

現在有許多方法可以驗證和測試RWD設計，從移動站點驗證器和移動仿真器到同步測試工具，如Adobe Edge Inspect。Chrome，Firefox和Safari瀏覽器以及Chrome控制臺提供響應式設計視口大小調整工具，第三方也是如此。

隨著移動使用的增加，RWD的使用案例現在將進一步擴大;?據Statista稱，來自移動設備的美國有機搜索引擎訪問量已經達到51％并且正在增加。

響應式網頁設計的歷史

第一個網站為特色，能夠適應瀏覽器窗口寬度的布局是奧迪?.COM在2001年年底推出的，由團隊創建的Razorfish由于爾根Spangl和吉姆Kalbach（信息架構），肯Olling（設計），和Jan Hoffmann（界面開發）。有限的瀏覽器功能意味著對于Internet Explorer，布局可以在瀏覽器中動態調整，而對于Netscape，頁面必須在調整大小時從服務器重新加載。

Cameron Adams于2004年創建了一個仍然在線的演示。到2008年，許多相關術語如“靈活”，“液體”，?“流體”和“彈性”被用于描述布局。CSS3媒體查詢幾乎準備好在2008年末/ 2009年初的黃金時段。?Ethan Marcotte創造了響應式網頁設計^[49]（RWD）一詞- 并將其定義為流體網格/靈活圖像/媒體查詢 - 2010年5月A List Apart中的文章。^[2]他在2011年的一本名為“?響應式網頁設計”的書中描述了響應式網頁設計的理論和實踐。響應式設計被列為2012年頂級網頁設計趨勢的第二名.net雜志在＃1的漸進增強后。

Mashable稱2013年為響應式網頁設計年。^[50]許多其他消息來源建議將響應式設計作為移動應用程序的一種經濟高效的替代方案，因為它能夠將所有代碼存儲在一個網站中。隨著移動使用的持續增長，用戶和開發人員都開始意識到移動響應設計的優勢和重要性。^[51]當谷歌宣布搜索引擎將獎勵響應度較高的排名網站時，這一重要性得到了證實。