响应式网页设计- 维基百科,自由的百科全书
文章推薦指數: 80 %
回應式網頁設計(英語:Responsive Web Design,通常縮寫為RWD),或稱自适应网页设计、響應式網頁設計、對應式網頁設計。
是一種網頁設計的技術,這種設計可使網站在 ...
回應式網頁設計
語言
監視
編輯
此條目需要編修,以確保文法、用詞、語氣、格式、標點等使用恰當。
請按照校對指引,幫助編輯這個條目。
(幫助、討論)
回應式網頁設計(英語:ResponsiveWebDesign,通常縮寫為RWD),或稱自適應網頁設計、響應式網頁設計、對應式網頁設計。
是一種網頁設計的技術,這種設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。
[1][2][3]「內容就像水」,這是一個說明RWD原則的說法。
一個使網頁上的多個元素在桌上型電腦、平板電腦、智慧型手機等不同解析度的裝置上適應的範例。
層疊樣式表CSS動畫
IE盒模型缺陷
CSSfilter
無表格網頁設計
回應式網頁設計
維基教科書本模板:檢視討論編輯
對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。
此概念於2010年5月由美國網頁設計師EthanMarcotte所提出。
[4]採用RWD的網站[1][5]使用CSS3中的Mediaqueries(英語:Mediaqueries),[3][6][7]是針對@media查詢的延伸應用[8],藉由流體格線[9]和回應式的圖片[10][11][12][13]針對不同大小的裝置提供對應的樣式:
流體格線概念要求頁面元素使用相對單位,如百分比或em調整大小,而不是絕對單位,如像素或點。
[9]
回應式圖片應以相對單位調整大小(最大到100%),防止它們顯示於它們的上層元素外。
Mediaqueries(英語:Mediaqueries)允許頁面根據瀏覽裝置而使用不同CSS樣式規則,最常用的是瀏覽器的寬度。
回應式網頁設計變得更加重要,是因為行動裝置流量現在占網際網路流量的一半以上[14]。
因此,Google宣布行動裝置時代的到來(Mobilegeddon)(2015年4月21日),如果搜尋行為是來自行動裝置,將會提高對行動裝置友善的網站排名。
[15]。
目次
1相關概念
1.1行動裝置優先,不引人注目的JavaScript和漸進增強
1.2基於瀏覽器,特性或設備探測的漸進增強
2挑戰和其它辦法
3歷史
4參考文獻
5外部連結
6參見
相關概念編輯
行動裝置優先,不引人注目的JavaScript和漸進增強編輯
「行動裝置優先」和「非侵入式JavaScript」/「漸進增強」(規劃新網站設計時的策略)是優先於RWD的概念:傳統的手機瀏覽器不理解JavaScript或者mediaqueries,因此最初的建議做法是建立一個只有基本框架的網站,接著根據智慧型手機和電腦分別提供增強功能;而不是試著「優雅降級」——使一個複雜的網站在最傳統行動電話上喪失某些功能。
[16][17][18][19]
基於瀏覽器,特性或裝置探測的漸進增強編輯
在一個網站必須支援缺乏JavaScript的基本的行動裝置的情況下,瀏覽器(使用者代理)探測(也叫做「瀏覽器嗅探(英語:Browser-sniffing)」),和行動裝置探測(英語:Mobiledevicedetection)[17][20]是推斷某些HTML和CSS特性是否受支援的兩種方式(作為漸進增強的基礎)—然而,這些方法不完全可靠。
對於能力更強的行動電話和PC,可以直接測試瀏覽器對HTML/CSS功能的支援(辨識裝置或者使用者代理字串)的JavaScript框架如Modernizr,jQuery和jQueryMobile(英語:JQueryMobile)等流行起來。
Polyfills(英語:Polyfill)可以被用於添加對一些功能的支援—比如,支援mediaqueries(RWD所需要的),和在(舊版本)InternetExplorer上提高HTML5支援。
功能探測在較舊的瀏覽器上也可能不完全可靠:某些也許會報告一個特性可用,然而它或者是缺失,或者是實現的如此拙劣以至實質上無法工作。
[21][22]
挑戰和其它辦法編輯
LukeWroblewski總結出了RWD和移動設計中的一些挑戰,還建立了一個多裝置布局模式的目錄。
[23][24][25]他提議,比起單純的RWD手段,DeviceExperience或者RESS(通過伺服器端組件的回應式網頁設計,ResponsiveWebDesignwithServerSideComponents)等方法可以提供對行動裝置更加最佳化的使用者體驗。
[26][27][28]樣式表語言如Sass的伺服器端「動態CSS(英語:DynamicCascadingStyleSheets)」實現可以是這種做法的一部分。
RWD的一個問題是橫幅廣告和影片不是串流的。
[29]然而搜尋廣告(英語:Searchadvertising)和(橫幅)顯示廣告支援特定的裝置平台目標,和為桌面,智慧型手機和基本的行動裝置提供不同的廣告尺寸格式。
可以為不同平台使用不同的著陸頁(英語:Landingpage)URL,[30]或者可以用AJAX顯示一個頁面上的不同廣告變體。
[24][31][20]
歷史編輯
EthanMarcotte在他在AListApart(英語:AListApart)的文章中發明了術語ResponsiveWebDesign(RWD)。
[1]他在他2011年關於這個主題所寫的簡短的書中描述了回應式網頁設計的理論和實踐。
[32]回應式設計被.net雜誌(英語:.net(magazine))列為2012年頂級網頁設計趨勢的第二名(漸進增強是第一名)。
他們也列出了EthanMarcotte最喜歡的回應式站點之中的20個。
[2]
參考文獻編輯
^1.01.11.2Marcotte,Ethan.ResponsiveWebDesign.AListApart.May25,2010[2012-12-05].(原始內容存檔於2013-05-24).
^2.02.1EthanMarcotte's20favouriteresponsivesites..netmagazine.October11,2011.
^3.03.1Gillenwater,ZoeMickley.ExamplesofflexiblelayoutswithCSS3mediaqueries.StunningCSS3:320.Dec15,2010.ISBN 978-0-321-722133.
^回應式網頁設計的概念.慈濟醫療志業數位學習電子報.[2017-02-10].
^Pettit,ZoeNick.Beginner’sGuidetoResponsiveWebDesign.TeamTreehouse.comblog.Aug8,2012.
^Gillenwater,ZoeMickley.Craftingqualitymediaqueries.Oct21,2011.
^Responsivedesign—harnessingthepowerofmediaqueries.GoogleWebmasterCentral.Apr30,2012.
^W3C@mediarule
^9.09.1Marcotte,Ethan.FluidGrids.AListApart.March3,2009.
^Marcotte,Ethan.Fluidimages.AListApart.June7,2011.
^AdaptiveImages.
^Hannemann,Anselm.Theroadtoresponsiveimages.netMagazine.2012-09-07.
^Jacobs,Denise.21toptoolsforresponsivewebdesign..netMagazine.August23,2011.
^CiscoVisualNetworkingIndex:GlobalMobileDataTrafficForecastUpdate2014–2019WhitePaper.Cisco.January30,2015[August4,2015].
^OfficialGoogleWebmasterCentralBlog:Rollingoutthemobile-friendlyupdate.OfficialGoogleWebmasterCentralBlog.[August4,2015].
^Wroblewski,Luke.MobileFirst.November3,2009.
^17.017.1Firtman,Maximiliano.ProgrammingtheMobileWeb.July30,2010:512.ISBN 978-0-596-80778-8.
^Gracefuldegradationversusprogressiveenhancement.February3,2009.(原始內容存檔於2012年12月20日).
^DesigningwithProgressiveEnhancement.March1,2010:456.ISBN 978-0-321-65888-3.
^20.020.1Server-SideDeviceDetection:History,BenefitsAndHow-To.Smashingmagazine.September24,2012.
^BlackBerryTorch:TheHTML5DeveloperScorecard|Blog.Sencha.2010-08-18[2012-09-11].
^MotorolaXoom:TheHTML5DeveloperScorecard|Blog.Sencha.2011-02-24[2012-09-11].
^Wroblewski,Luke.Mobilism:jQueryMobile.May17,2011.
^24.024.1Wroblewski,Luke.RollingUpOurResponsiveSleeves.February6,2012.
^Wroblewski,Luke.Multi-DeviceLayoutPatterns.March14,2012.
^Wroblewski,Luke.ResponsiveDesign...orRESS.February29,2012.
^Wroblewski,Luke.RESS:ResponsiveDesign+ServerSideComponents.September12,2011.
^Andersen,Anders.GettingStartedwithRESS.May9,2012.
^Snyder,Matthew;Koren,Etai.Thestateofresponsiveadvertising:thepublishers'perspective..netMagazine.Apr30,2012.
^GoogleAdWordsTargeting(DevicePlatformTargeting)
^JavaScriptandResponsiveWebDesignGoogleDevelopers
^Marcotte,Ethan.ResponsiveWebDesign.2011:143.ISBN 978-0-9844425-7-7.
AtopTechnologies
外部連結編輯
ResponsiveWebDesign參見編輯
網際網路主題
設計主題
電腦程式設計主題
漸進增強
非侵入式JavaScript
無表格網頁設計
取自「https://zh.wikipedia.org/w/index.php?title=响应式网页设计&oldid=71947656」
延伸文章資訊
- 1什麼是RWD網頁設計-新視野網頁設計
RWD網頁設計方式是使用目前最新的HTML5 + CSS3 的技術來編撰網頁,版本太老舊的瀏覽器並沒有完全支援這些技術,所以瀏覽起來會有破格或是無法點擊頁面的情況發生,不過隨著 ...
- 2什麼是RWD響應式網頁設計?圖解說明讓你3分鐘搞懂手機版網站
RWD,英文原文為Responsive Web Design。RWD的中文意思是響應式網頁設計(也有人稱之為回應式網頁設計) 。RWD響應式網頁設計是一種網頁前端技術 ...
- 3响应式网页设计- 维基百科,自由的百科全书
回應式網頁設計(英語:Responsive Web Design,通常縮寫為RWD),或稱自适应网页设计、響應式網頁設計、對應式網頁設計。 是一種網頁設計的技術,這種設計可使網站在 ...
- 4網頁製作|什麼是RWD響應式網頁設計-網站設計的趨勢- 愛貝斯
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱回應式網頁設計,是Google推薦的網頁製作技術,RWD讓不同裝置都可以瀏覽同一網站,提供最佳的視覺體驗。
- 5RWD與AWD是什麼? 網站主該怎麼選? | 夏木樂網頁設計
RWD是什麼? Responsive Web Design 縮寫,大多翻譯做「響應式網頁設計」。 網頁會根據瀏覽網站的銀幕大小,自動調整成相應的設計。