回應式網頁設計- 維基百科,自由的百科全書
文章推薦指數: 80 %
回應式網頁設計(英語:Responsive Web Design,通常縮寫為RWD),或稱自適應網頁設計、響應式網頁設計、對應式網頁設計。
是一種網頁設計的技術,這種設計可使網站在 ...
回應式網頁設計
維基百科,自由的百科全書
跳至導覽
跳至搜尋
此條目需要編修,以確保文法、用詞、語氣、格式、標點等使用恰當。
請按照校對指引,幫助編輯這個條目。
(幫助、討論)
「內容就像水」,這是一個說明RWD原則的說法。
一個使網頁上的多個元素在桌上型電腦、平板電腦、智慧型手機等不同解析度的裝置上適應的範例。
層疊樣式表
CSS動畫
IE盒模型缺陷
CSSfilter
無表格網頁設計
回應式網頁設計
維基教科書
本模板:檢視討論編輯
回應式網頁設計(英語:ResponsiveWebDesign,通常縮寫為RWD),或稱自適應網頁設計、響應式網頁設計、對應式網頁設計。
是一種網頁設計的技術,這種設計可使網站在不同的裝置(從桌面電腦顯示器到行動電話或其他行動裝置)上瀏覽時對應不同解析度皆有適合的呈現,減少使用者進行縮放、平移和捲動等操作行為。
[1][2][3]
對於網站設計師和前端工程師來說,有別於過去需要針對各種裝置進行不同的設計,使用此種設計方式將更易於維護網頁。
此概念於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
無表格網頁設計
閱論編網頁設計使用者端語言
DHTML(HTML、CSS、JavaScript)
HTML5
VBScript(IE專用)
Javaapplet
ActionScript(用於Flash)
技術
網頁親和力(無障礙網頁檢測(英語:WebContentAccessibilityGuidelines))
無表格網頁設計
回應式網頁設計
MVVM
WYSIWYG
容錯(優雅降級)
CSSSprite
DOM
WebGL
MathML
伺服器端語言
ActiveServerPages
ASP.NET(C♯、VB.NET)
JSP(Java)
PHP
CGI
ColdFusion
Perl
Python
Ruby
Smalltalk
Node.js(JavaScript)
技術
Web應用框架
AJAX
MVC
單頁應用
CRUD
REST
應用
部落格
網路論壇
企業入口網站
電子商務
內容管理系統
電子出版
數位下載
網頁遊戲
其他
網頁程式設計
網路應用程式
網頁瀏覽器比較
排版引擎
搜尋引擎最佳化
閱論編設計
設計綱要(英語:Outlineofdesign)
設計主題
設計師
學科傳媒設計
廣告
裝影格
企業形象設計
展會設計
電影標題設計(英語:Filmtitledesign)
平面設計
運動圖形設計(英語:Motiongraphicdesign)
郵票設計(英語:Postagestampdesign)
列印設計(英語:Printdesign)
插畫
資訊設計
教學設計
新聞設計(英語:Newsdesign)
攝影
零售設計(英語:Retaildesign)
標示 /交通標誌設計(英語:Trafficsigndesign)
字型排印學 /字型設計
影片設計(英語:Videodesign)
商品展示設計
環境設計
建築
建築光學
建築設計
被動太陽能建築設計(英語:Passivesolarbuildingdesign)
環境設計
環境影響設計(英語:Environmentalimpactdesign)
園林設計
電腦輔助園林設計(英語:Computer-aidedgardendesign)
健康社群設計(英語:Healthycommunitydesign)
旅店設計(英語:Hoteldesign)
室內建築(英語:Interiorarchitecture)
室內設計
體驗室內設計(英語:Experientialinteriordesign)
Keyline設計(英語:Keylinedesign)
景觀建築
可持續景觀建築(英語:Sustainablelandscapearchitecture)
景觀設計(英語:Landscapedesign)
空間設計(英語:Spatialdesign)
城市設計
工業設計
汽車設計
汽車懸架設計(英語:Automotivesuspensiondesign)
CMF設計(英語:CMFdesign)
瓦楞紙箱設計(英語:Corrugatedboxdesign)
電吉他設計(英語:Electricguitardesign)
家具設計
可持續家具設計(英語:Sustainablefurnituredesign)
硬體介面設計(英語:Hardwareinterfacedesign)
摩托車設計(英語:Motorcycledesign)
包裝
攝影鏡頭設計(英語:Photographiclensdesign)
產品設計(英語:Productdesign)
美術指導
感官設計
服務設計
互動設計
體驗設計
員工體驗設計(英語:Employeeexperiencedesign)
遊戲設計
關卡設計(英語:Leveldesign)
電子遊戲設計
硬體介面設計(英語:Hardwareinterfacedesign)
圖標設計
沉浸式設計(英語:Immersivedesign)
資訊設計
聲音互動設計
使用者體驗設計
使用者介面設計
網頁設計
其他應用藝術
公共藝術
陶藝 /玻璃設計(英語:Glassart)
時尚設計
劇裝設計
珠寶設計
花卉設計(英語:Floraldesign)
遊戲藝術設計(英語:Gameartdesign)
道具設計師(英語:Propertydesigner)
風景設計(英語:Scenicdesign)
音效設計(英語:Sounddesign)
舞台/照明設計(英語:Lightingdesigner)
紡織設計(英語:Textiledesign)
其他設計和工程學
演算法設計
鍋爐設計(英語:Boilerdesign)
概念設計
資料庫設計(英語:Databasedesign)
藥物設計
電動系統設計(英語:Electricalsystemdesign)
試驗設計
濾波器設計
任務設計(英語:Jobdesign)
積體電路設計
電路設計
物理設計
電力網路設計(英語:Powernetworkdesign(IC))
核武器設計方案
核酸設計(英語:Nucleicaciddesign)
組織設計(英語:Organizationdesign)
程式設計(化工)
CPU設計
蛋白質設計(英語:Proteindesign)
研究設計(英語:Researchdesign)
社會設計(英語:Socialdesign)
軟體設計
宇宙飛船設計(英語:Spacecraftdesign)
戰略設計(英語:Strategicdesign)
系統設計(英語:Systemsdesign)
途徑
以活動為中心設計(英語:Activity-centereddesign)
自適應網頁設計(英語:Adaptivewebdesign)
情感設計(英語:Affectivedesign)
腦力激盪法
按委員會設計(英語:Designbycommittee)
契約式設計
概念知識理論(英語:C-Ktheory)
設計收斂
參與式設計(英語:Participatorydesign)
面向概念設計(英語:Concept-orienteddesign)
組態設計(英語:Configurationdesign)
語境設計(英語:Contextualdesign)
持續設計(英語:Continuousdesign)
從搖籃到搖籃設計
創造性解決問題(英語:Creativeproblem-solving)
創意技術(英語:Creativitytechniques)
關鍵設計(英語:Criticaldesign)
設計小說(英語:Designfiction)
防禦性設計
設計-招標-建造(英語:Design–bid–build)
設計-建造
建築師主導設計(英語:Architect-leddesign–build)
領域驅動設計
生態設計
能源中性設計(英語:Energyneutraldesign)
工程設計流程(英語:Engineeringdesignprocess)
概率設計(英語:Probabilisticdesign)
容錯設計(英語:Error-tolerantdesign)
容許故障設計
面向框架設計(英語:Framework-orienteddesign)
為裝配設計
為改變行為設計(英語:Designforbehaviourchange)
為製造設計
為六西格瑪設計(英語:DesignforSixSigma)
可測試性設計
為X設計(英語:DesignforX)
實用設計(英語:Functionaldesign)
生成設計(英語:GenerativeDesign)
地理設計(英語:Geodesign)
頂層設計(英語:High-leveldesign)
整合設計(英語:Integrateddesign)
整合頂層設計(英語:Integratedtopsidedesign)
基於智慧型設計(英語:Intelligence-baseddesign)
迭代設計(英語:Iterativedesign)
KISS原則
底層設計(英語:Low-leveldesign)
元設計(英語:Metadesign)
心智圖
模組化設計
新浪潮(英語:NewWave(design))
物件導向設計
開放設計(英語:Opendesign)
參數設計(英語:Parametricdesign)
參與設計(英語:Participatorydesign)
基於平台設計(英語:Platform-baseddesign)
基於原則設計
流程為中心設計(英語:Process-centereddesign)
公共利益設計(英語:Publicinterestdesign)
理性設計(英語:Rationaldesign)
可再生設計(英語:Regenerativedesign)
可靠度
基於研究設計(英語:Research-baseddesign)
責任驅動設計(英語:Responsibility-drivendesign)
回應式網頁設計
安全壽命設計
永續設計
系統設計(英語:SystemicDesign)
面向系統設計(英語:SystemsOrientedDesign)
無表格網頁設計
限制理論
自上而下和自下而上設計(英語:Top-downandbottom-updesign)
轉型設計(英語:Transformationdesign)
隔代設計(英語:Transgenerationaldesign)
TRIZ
通用設計
為所有人設計(英語:DesignforAll(inICT))
色彩通用設計
以使用率為中心設計(英語:Usage-centereddesign)
以使用為中心設計(英語:Use-centereddesign)
以使用者為中心的設計
感情植入設計(英語:Empathicdesign)
使用者創新
價值驅動設計(英語:Value-drivendesign)
價值敏感設計(英語:Valuesensitivedesign)
為隱私設計(英語:PrivacybyDesign)
設計選擇(英語:Designchoice)
設計計算(英語:Designcomputing)
設計控制(英語:Designcontrols)
設計流程(英語:Designflow(EDA))
設計領導(英語:Designleadership)
設計管理(英語:Designmanagement)
設計標記(英語:Designmarker)
設計方法(英語:Designmethods)
設計模式
設計研究
設計科學(英語:Designscience)
設計戰略(英語:Designstrategy)
設計理論(英語:Designtheory)
設計思考
工具智慧財產權組織獎項設計工具(英語:Designtool)
演算法輔助設計(英語:Algorithms-AidedDesign(AAD))(AAD)
建築模型(英語:Architecturalmodel)
藍圖
綜合布局(英語:Comprehensivelayout)
電腦輔助設計(CAD)
電腦輔助工業設計(英語:Computer-aidedindustrialdesign)(CAID)
虛擬家居設計軟體(英語:Virtualhomedesignsoftware)
電腦自動設計(CAutoD)
設計品質指標(英語:Designqualityindicator)
電子設計自動化
流程圖
Mockup
產品設計規格
原型(工程)
寫生
分鏡
工程製圖
HTML編輯器
網站線框(英語:Websitewireframe)
智慧財產權
社群設計(英語:Communitydesign)
圍繞設計(英語:Designaround)
設計專利(英語:Designpatent)
Geschmacksmuster(英語:Geschmacksmuster)
工業設計權(英語:Industrialdesignright)
歐盟工業設計權(英語:IndustrialdesignrightsintheEuropeanUnion)
組織
美國平面設計協會
特許設計師協會(英語:CharteredSocietyofDesigners)
設計與工業協會(英語:DesignandIndustriesAssociation)
設計委員會(英語:DesignCouncil)
國際論壇設計
設計學會(英語:TheDesignSociety)
設計研究學會(英語:DesignResearchSociety)
獎項
歐洲設計獎(英語:EuropeanDesignAward)
德國設計獎(英語:GermanDesignAward)
好設計獎(芝加哥)(英語:GoodDesignAward(Chicago))
好設計獎
Graphex(英語:Graphex)
詹姆斯·戴森獎(英語:JamesDysonAward)
菲利浦親王設計獎
普利茲克獎
iF產品設計獎
紅點設計大獎
菲爾·卡夫曼獎
東京ADC賞
日本文化廳媒體藝術祭
時報廣告獎
台灣精品獎
相關主題
美學
概念藝術
創意產業
文化圖示(英語:Culturalicon)
.design
企業架構
未來學
智慧型設計
新產品開發
設計哲學
程式類比
慢設計(英語:Slowdesign)
STEAMfields(英語:STEAMfields)
非智慧型設計(英語:Unintelligentdesign)
視覺化
惡性問題(英語:Wickedproblem)
設計概要
設計變更(英語:Designchange)
經典設計(英語:Designclassic)
設計總監(英語:Designdirector)
設計教育
設計元素和原則(英語:Designelementsandprinciples)
設計工程師(英語:Designengineer)
設計公司
設計史
設計知識(英語:Designknowledge)
設計語言
設計壽命(英語:Designlife)
設計負載(英語:Designload)
設計博物館
設計範例(英語:Designparadigm)
設計導向(英語:Designrationale)
設計審查(英語:Designreview)
設計規格
設計工作室(英語:Designstudio)
設計技術(英語:Designtechnology)
維基共享資源
維基教科書
維基新聞
維基語錄
維基文庫
維基詞典
規範控制
GND:1035443651
取自「https://zh.wikipedia.org/w/index.php?title=响应式网页设计&oldid=71947656」
分類:層疊樣式表網頁設計響應式網頁設計人機互動可用性用戶界面2010年代新創詞語隱藏分類:需要校對的頁面含有英語的條目包含GND標識符的維基百科條目
導覽選單
個人工具
沒有登入討論貢獻建立帳號登入
命名空間
條目討論
臺灣正體
不转换简体繁體大陆简体香港繁體澳門繁體大马简体新加坡简体臺灣正體
查看
閱讀編輯檢視歷史
更多
搜尋
導航
首頁分類索引特色內容新聞動態近期變更隨機條目資助維基百科
說明
說明維基社群方針與指引互助客棧知識問答字詞轉換IRC即時聊天聯絡我們關於維基百科
工具
連結至此的頁面相關變更上傳檔案特殊頁面靜態連結頁面資訊引用此頁面維基數據項目
列印/匯出
下載為PDF可列印版
其他專案
維基共享資源
其他語言
العربيةБългарскиCatalàČeštinaDeutschΕλληνικάEnglishEspañolEestiفارسیFrançaisMagyarBahasaIndonesiaItaliano日本語한국어LietuviųNederlandsNorskbokmålPolskiPortuguêsRomânăРусскийСрпски/srpskiSvenskaУкраїнськаTiếngViệt粵語
編輯連結
延伸文章資訊
- 1網頁製作|什麼是RWD響應式網頁設計-網站設計的趨勢- 愛貝斯
響應式網頁設計(Responsive Web Design)簡稱RWD,又稱回應式網頁設計,是Google推薦的網頁製作技術,RWD讓不同裝置都可以瀏覽同一網站,提供最佳的視覺體驗。
- 2RWD比較好還是AWD? - 達文西數位科技
RWD (響應式網頁設計)是甚麼? ... RWD (響應式網頁設計):可以自動將網站顯示於各種不同裝置,包含桌機、手機、平板,根據不一樣的銀幕大小設計友善的閱讀 ...
- 3什麼是RWD網頁設計-新視野網頁設計
RWD網頁設計方式是使用目前最新的HTML5 + CSS3 的技術來編撰網頁,版本太老舊的瀏覽器並沒有完全支援這些技術,所以瀏覽起來會有破格或是無法點擊頁面的情況發生,不過隨著 ...
- 4响应式网页设计- 维基百科,自由的百科全书
回應式網頁設計(英語:Responsive Web Design,通常縮寫為RWD),或稱自适应网页设计、響應式網頁設計、對應式網頁設計。 是一種網頁設計的技術,這種設計可使網站在 ...
- 5回應式網頁設計- 維基百科,自由的百科全書
回應式網頁設計(英語:Responsive Web Design,通常縮寫為RWD),或稱自適應網頁設計、響應式網頁設計、對應式網頁設計。 是一種網頁設計的技術,這種設計可使網站在 ...