响应式网页设计 | web design中文
“內容就像水”,這是一個說明RWD原則的說法。一個使網頁上的多個元素在桌上型電腦、平板電腦、智慧型手機等不同解析度的設備上適應的示例。響應式網頁設計(英語:Responsivewebdesign,通常縮寫为RWD),或稱自适应网页设计、回應式網頁設計、對應式網頁設計。是一种网页设计的技術做法,该设计可使网站在不同的設備(从桌面电脑显示器到移动电话或其他流動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,减少使用者進行缩放、平移和滚动等操作行為。[1][2][3]對於網站設計師和前端工程師來說,有別於過去需要針對各種設備進行不同...
“內容就像水”,這是一個說明RWD原則的說法。 一個使網頁上的多個元素在桌上型電腦、平板電腦、智慧型手機等不同解析度的設備上適應的示例。響應式網頁設計(英語:Responsive web design,通常縮寫为RWD),或稱自适应网页设计、回應式網頁設計、對應式網頁設計。 是一种网页设计的技術做法,该设计可使网站在不同的設備(从桌面电脑显示器到移动电话或其他流動產品裝置)上瀏覽時對應不同解析度皆有適合的呈現,减少使用者進行缩放、平移和滚动等操作行為。[1][2][3]
對於網站設計師和前端工程師來說,有別於過去需要針對各種設備進行不同的設計,使用此種設計方式將更易於維護網頁。
此概念於2010年5月由國外著名網頁設計師Ethan Marcotte所提出。[4]
采用 RWD 设计的网站[1][5]使用CSS3 Media queries,[3][6][7]即一种对 @media 规则的扩展[8],以及流式的基于比例的网格[9]和自适应大小的图像[10][11][12][13]以适应不同大小的设备:
流式网格概念要求页面元素使用相对单位如百分比或字体排印学调整大小,而不是绝对的单位如像素或点。[9] 灵活的图像也以相对单位调整大小(最大到 100%),以防止它们显示在包含它们的元素外面。 Media queries允许网页根据访问站点设备的特点而使用不同 CSS 样式规则,最常用的是浏览器的宽度。响应式网页设计变得更加重要,因为移动流量现在占互联网流量的一半以上[14]。因此,谷歌宣布移动设备时代的到来(Mobilegeddon)(2015年4月21日),并开始提高移动友好的网站的评级,如果搜索是被从一个移动设备发起[15]。
相关概念[编辑] 移动优先,不引人注目的 JavaScript 和渐进增强[编辑]「移动优先」和「Unobtrusive JavaScript」/「渐进增强」(考虑一种新的网站设计时的策略)是先于 RWD 的相关概念: 基础的手机浏览器不理解 JavaScript 或者 media queries,因此建议的做法是创建一个只有基本框架的网站,然后再为智能手机和 PC 提供增强功能;而不是试着“优雅降级”——让一个复杂的,图像丰富的站点工作在最基本的...