
什麼是響應式布局?
響應式網頁(ye)設計这一設計理念由美國(guo)網頁設計師Ethan Marcotte在2010年5月(yue)份正(zheng)式提出,是当代(dai)互聯網開发中的重要(yao)概念。这一方法的核心思想是讓網站能够兼容多個終端(duan)設備,覆盖PC電脑、Pad平(ping)板、智能手機等各類主流設備,也為谷歌glass、苹(ping)果iWatch等新型穿(chuan)戴設備的適配预留了擴展空(kong)間。
響應式(shi)布局概念提出之后,很快便在全球範围内形成(cheng)了一種網站設計趨勢,千助也對其設計理念和(he)製作技術進行了深入的研究和實践,並將其應(ying)用於自(zi)身的官方網站建設当中 ( 1000zhu.com ) ,下面就與大家(jia)分(fen)享下響應式布局的設計思路。
響應式布局的設計思路(lu)
在以前的網站製作過程中(zhong),調試各種浏(liu)覽器兼容性已經(jing)給設計者們带來了很大的困扰,現在又要加上各種屏幕的兼容測(ce)試(shi),这不(bu)是讓人(ren)崩溃的節奏吗?但是,有需求就會(hui)有解決方案,CSS3媒體查詢
( Media Query )
技術的诞生解決了这個难題,我們通過这種技術可以轻(qing)松地判断設備屏幕(mu)尺寸,並根據不同的尺寸調整布局方式,从而實(shi)現了兼(jian)容多種終端設備的需求。
在(zai)進(jin)行響應式布局設計時,我們首先要明確網站用(yong)戶的主要終(zhong)端來源。针(zhen)對不同的用戶群體特征,應当(dang)采取(qu)差异化的設計策略。如果網站的移(yi)動端用戶占(zhan)比较大,則優先采用"手機屏優先(xian)"的設計方案,確保在小屏幕設備上的(de)視覺效果和交互體驗;如果是使用PC電脑的用戶為主,則優先采用"宽屏優先"的設計方案,充分利用桌面顯示空間。
以"手機屏優先(xian)"為核心設(she)計理念來說(shuo),我們可以將竖屏和橫屏模式進行細致的(de)區分布局。在響應式設計實(shi)践中,需要从最小屏幕依(yi)次至(zhi)最大屏幕進行系統的布局規劃:iphone4、iphone5、iphone6、iphone6 plus、mini ipad、ipad、PC小屏、PC宽屏。这樣(yang)的分層設計方法能够覆盖用戶日常接触的各類終(zhong)端設備。 当然,實际項目中也可以根據業(ye)務需求情(qing)况,灵(ling)活調整或合並一些屏幕的布局方式,以提高開(kai)发效率(lv)。至於三星、小(xiao)米等手機或Pad屏幕,从(cong)技術角(jiao)度看,其(qi)實际屏幕規格基本與苹果系列的屏幕規格基(ji)本一致,在布局適配時也不會(hui)出現明顯的偏差。
免費的響應式布局在線測試工具

響(xiang)應式布局的发展前景
在当前互聯網應用的发展(zhan)趨勢下(xia),IE9以下版本的浏覽器(qi)因技(ji)術架構限製,无法(fa)支持響(xiang)應式布局这一現代網頁設計標準。
虽然在中國市場依然存在大(da)量(liang)的IE8用戶群體,但从全球範围來(lai)看,技術发展的進程將不(bu)可(ke)避免地逐步淘汰低版本浏覽器。随(sui)着互聯(lian)網應用的复雜度不断提升,这些仍在使用旧版本浏覽器的用戶將被迫升(sheng)級自己的浏覽器(qi)版本,以便获得(de)更加稳定流畅的上網體(ti)驗。
在我們发布的(de)《前瞻(zhan)2015全球網站設計趨勢》研究文章中,就已經明確指出響(xiang)應式布局將逐步席卷各類互(hu)聯網應用领域。