謝 輝，楊曉蓉，張麗萍，屠媛媛

(中國(guó)農(nóng)業(yè)科學(xué)院農(nóng)業(yè)信息研究所；數(shù)字農(nóng)業(yè)預(yù)警技術(shù)重點(diǎn)開(kāi)放實(shí)驗(yàn)室，北京 100081)

?

基于響應(yīng)式Web的農(nóng)業(yè)網(wǎng)站設(shè)計(jì)方法研究

謝 輝，楊曉蓉，張麗萍，屠媛媛

(中國(guó)農(nóng)業(yè)科學(xué)院農(nóng)業(yè)信息研究所；數(shù)字農(nóng)業(yè)預(yù)警技術(shù)重點(diǎn)開(kāi)放實(shí)驗(yàn)室，北京 100081)

摘要響應(yīng)式Web由于其適應(yīng)全設(shè)備的特點(diǎn)，已成為當(dāng)今網(wǎng)站設(shè)計(jì)的主流。該研究從對(duì)響應(yīng)式Web的介紹和關(guān)鍵技術(shù)的分析入手，結(jié)合國(guó)內(nèi)外響應(yīng)式Web應(yīng)用的現(xiàn)狀，提出了農(nóng)業(yè)網(wǎng)站響應(yīng)式Web的設(shè)計(jì)流程，并對(duì)頁(yè)面布局作出了多種方案分析，為農(nóng)業(yè)網(wǎng)站建設(shè)提供參考。

關(guān)鍵詞響應(yīng)式Web；HTML5；CSS3；媒體查詢(xún)

截至2014年12月，我國(guó)網(wǎng)民規(guī)模達(dá)6.49億，全年共計(jì)新增網(wǎng)民3 117萬(wàn)?；ヂ?lián)網(wǎng)普及率為47.9%，較2013年底提升了2.1個(gè)百分點(diǎn)。其中手機(jī)網(wǎng)民規(guī)模達(dá)5.57億，較2013年增加5 672萬(wàn)。網(wǎng)民中使用手機(jī)上網(wǎng)的人群占比由2013年的81.0%提升至85.8%[1]。明顯可以看出，網(wǎng)絡(luò)用戶(hù)使用小屏幕設(shè)備(如平板電腦、手機(jī))上網(wǎng)已成為趨勢(shì)，另外，超大屏幕的顯示器也在快速普及，從而導(dǎo)致上網(wǎng)設(shè)備的尺寸差距與日俱增。幾年前網(wǎng)站設(shè)計(jì)是按照固定寬度進(jìn)行設(shè)計(jì)的，以求設(shè)計(jì)出的網(wǎng)站能適應(yīng)最常見(jiàn)的顯示器尺寸，如960像素(px)頁(yè)面對(duì)應(yīng)1 024像素的屏幕，在更大的屏幕上，網(wǎng)站會(huì)簡(jiǎn)單地以色條、色塊填充空區(qū)域。當(dāng)更多用戶(hù)在用手機(jī)登錄網(wǎng)站后，單獨(dú)為手機(jī)設(shè)計(jì)的移動(dòng)版網(wǎng)站也應(yīng)運(yùn)而生。移動(dòng)版網(wǎng)站針對(duì)手機(jī)單獨(dú)設(shè)計(jì)，具有一個(gè)固定的頁(yè)面寬度，適配320像素的屏幕。但隨著電子市場(chǎng)的快速發(fā)展，不同品牌不同屏幕大小的智能手機(jī)和平板電腦進(jìn)入市場(chǎng)，固定寬度的網(wǎng)站設(shè)計(jì)并不能適應(yīng)所有的屏幕。面對(duì)形形色色的終端，千差萬(wàn)別的屏幕分辨率，已不太可能為每個(gè)屏幕專(zhuān)門(mén)設(shè)計(jì)一個(gè)網(wǎng)站。在此背景下，能適應(yīng)所有尺寸屏幕的響應(yīng)式Web設(shè)計(jì)方式應(yīng)運(yùn)而生。筆者在對(duì)響應(yīng)式Web的技術(shù)要點(diǎn)及國(guó)內(nèi)外應(yīng)用現(xiàn)狀進(jìn)行概述的基礎(chǔ)上，結(jié)合農(nóng)業(yè)網(wǎng)站的特點(diǎn)，提出了基于響應(yīng)式Web的農(nóng)業(yè)網(wǎng)站設(shè)計(jì)流程和模塊布局方案，為農(nóng)業(yè)網(wǎng)站建設(shè)提供參考。

1響應(yīng)式Web設(shè)計(jì)概述

響應(yīng)式Web設(shè)計(jì)結(jié)合了媒體查詢(xún)、流動(dòng)布局和彈性視覺(jué)媒體等技術(shù)手段，是能針對(duì)任意設(shè)備對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行完美布局的一種顯示機(jī)制[2]。通過(guò)響應(yīng)式的設(shè)計(jì)方式，能使網(wǎng)站頁(yè)面隨瀏覽設(shè)備的不同而自行響應(yīng)，動(dòng)態(tài)地調(diào)整布局結(jié)構(gòu)和元素的規(guī)格樣式，將相同的內(nèi)容以不同的布局方式呈現(xiàn)給不同終端的用戶(hù)。響應(yīng)式Web概念設(shè)計(jì)見(jiàn)圖1。

圖1　響應(yīng)式Web概念設(shè)計(jì)Fig.1　Responsive web design chart

1.1響應(yīng)式Web實(shí)現(xiàn)的關(guān)鍵技術(shù)創(chuàng)建一個(gè)響應(yīng)式Web需要用到HTML5和CSS3。

HTML不是一成不變的，它會(huì)隨時(shí)修訂以適應(yīng)新技術(shù)的發(fā)展，并加入新特性，每隔幾年就會(huì)有新版本的HTML發(fā)布。HTML5的制定開(kāi)始于2004年，最終規(guī)范于2014年[3]。HTML5 強(qiáng)化了Web網(wǎng)頁(yè)的表現(xiàn)性能，更便于交互、多媒體等功能的實(shí)現(xiàn)；其次，增加了本地?cái)?shù)據(jù)庫(kù)等各方面的標(biāo)簽以及應(yīng)用程序接口。

HTML賦予網(wǎng)站中所有內(nèi)容以結(jié)構(gòu)，CSS則告訴瀏覽器以什么樣式來(lái)顯示這些內(nèi)容。CSS也有不同版本，最新的CSS3版引入了一些新的屬性，最顯著的變化就是增加了媒體查詢(xún)功能[4]。

(1)媒體查詢(xún)(Media Query)。媒體查詢(xún)功能可以讓設(shè)計(jì)者基于瀏覽網(wǎng)站的設(shè)備的特性來(lái)應(yīng)用不同的樣式聲明，可以查詢(xún)很多媒體特性，如視口的寬度和高度、屏幕寬度和高度、方向、寬高比和分辨率。查詢(xún)者可以訪(fǎng)問(wèn)MQtest.io 網(wǎng)站(http://mqtest.io/)。

圖2　顯示設(shè)備瀏覽器窗口的尺寸Fig.2　Size of display device browser window

圖2精確地顯示了設(shè)備屏幕的高度、寬度、設(shè)備高度/寬度、屏幕寬高比例、方向和分辨率等數(shù)值。

(2)彈性視覺(jué)媒體(Visual Media Elasticity)。視覺(jué)媒體主要指文本、圖形、圖像、動(dòng)畫(huà)和視頻等可視媒體。彈性視覺(jué)媒體設(shè)計(jì)的本質(zhì)是確保視覺(jué)媒體適應(yīng)版式布局的變化，確保頁(yè)面上媒體的可讀性。

在響應(yīng)式Web設(shè)計(jì)中，以“em”作為量度單位，em的大小由上下文定義的字體大小計(jì)算而來(lái)，是相對(duì)單位而非絕對(duì)單位。設(shè)計(jì)時(shí)通常給body標(biāo)簽設(shè)置font-size屬性值后，給其他文本都使用em這個(gè)相對(duì)單位，這樣在基準(zhǔn)字號(hào)一定的情況下,該元素的大小就能實(shí)現(xiàn)尺寸的自適應(yīng)。

同樣圖片在處理上，如果要使圖片能根據(jù)分辨率來(lái)適應(yīng)屏幕的大小，而還不失真，頁(yè)面設(shè)計(jì)者要做的只是讓圖片能根據(jù)不同分辨率自適應(yīng)，可以考慮在不同分辨率下使用不同的圖片，讓圖片在不同尺寸顯示器上自適應(yīng)，不給圖片設(shè)定具體的寬高尺寸，只要在樣式中給該圖片一個(gè)widht:100%，這樣圖片就能根據(jù)其父容器的尺寸自動(dòng)調(diào)整了。

(3)流動(dòng)布局[5](Fluid Grid)。流動(dòng)布局的含義就是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。流動(dòng)布局其實(shí)就是在設(shè)計(jì)者實(shí)現(xiàn)CP終端頁(yè)面的基礎(chǔ)上，將一些元素的寬高由原來(lái)的固定像素(px)調(diào)整為百分比(%)或字體比例(em)[6]。

通過(guò)將固定像素布局轉(zhuǎn)換成靈活的流式布局，確保在媒體查詢(xún)未切換樣式期間布局能適應(yīng)視口改變。流動(dòng)布局依靠浮動(dòng)和百分比寬度來(lái)實(shí)現(xiàn)，浮動(dòng)實(shí)現(xiàn)布局區(qū)塊的動(dòng)態(tài)重組，百分比寬度實(shí)現(xiàn)未到達(dá)斷點(diǎn)時(shí)的區(qū)塊寬度調(diào)整，以減少創(chuàng)建的斷點(diǎn)數(shù)。

1.2 國(guó)內(nèi)外響應(yīng)式Web發(fā)展?fàn)顩r響應(yīng)式Web設(shè)計(jì)是現(xiàn)今比較流行的一種網(wǎng)站前端開(kāi)發(fā)技術(shù)，它可以根據(jù)用戶(hù)使用設(shè)備的尺寸調(diào)整頁(yè)面的布局，使不同設(shè)備瀏覽頁(yè)面都能達(dá)到更加流暢、靈活的效果。響應(yīng)式Web設(shè)計(jì)比較適合內(nèi)容層級(jí)簡(jiǎn)單、頁(yè)面簡(jiǎn)潔的網(wǎng)站。響應(yīng)式Web設(shè)計(jì)的方法和技術(shù)在國(guó)外應(yīng)用的比較普遍，基于響應(yīng)式Web設(shè)計(jì)的哈佛大學(xué)網(wǎng)站PC端效果及手機(jī)端效果見(jiàn)圖3。除此之外，德州農(nóng)機(jī)大學(xué)等網(wǎng)站也很有特色，并且功能比較強(qiáng)大，運(yùn)行較穩(wěn)定。

圖3　哈佛大學(xué)網(wǎng)站PC端效果及手機(jī)端效果對(duì)比Fig. 3　Comparison between the PC version and mobile version of Harvard University website

目前在國(guó)內(nèi)響應(yīng)式設(shè)計(jì)設(shè)計(jì)還處于起步的階段，相對(duì)于移動(dòng)站點(diǎn)的開(kāi)發(fā)和利用，采用響應(yīng)式設(shè)計(jì)的網(wǎng)站比較少，其發(fā)展較慢有以下幾點(diǎn)原因：①響應(yīng)式Web設(shè)計(jì)的技術(shù)比較新穎，不能被 IE8 以下的瀏覽器良好地支持； ②響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)正處在發(fā)展階段，這項(xiàng)技術(shù)不能應(yīng)用于所有類(lèi)型的站； ③響應(yīng)式網(wǎng)站前期規(guī)劃階段需要投入的時(shí)間和精力比較大，后期測(cè)試階段比較復(fù)雜。

針對(duì)手機(jī)等便攜設(shè)備國(guó)內(nèi)農(nóng)業(yè)網(wǎng)站大多設(shè)計(jì)了針對(duì)性強(qiáng)的移動(dòng)版網(wǎng)站。比如“中國(guó)惠農(nóng)網(wǎng)”(www.cnhnlb.com)的PC端頁(yè)面及手機(jī)端頁(yè)面(圖4)。

圖4　惠農(nóng)網(wǎng)PC端效果及手機(jī)端效果對(duì)比Fig.4　Comparison between the PC version and mobile version of Huinong website

另外，“中國(guó)農(nóng)產(chǎn)品網(wǎng)”(www.zgncpw.com)也采用的相同方法。

移動(dòng)版網(wǎng)站使用較小的文件，所以可能比加載一個(gè)具有響應(yīng)性的網(wǎng)站更快。在大多數(shù)情況下，移動(dòng)版網(wǎng)站看起來(lái)完全與響應(yīng)式網(wǎng)站相同，但用戶(hù)體驗(yàn)是明顯不同的。另外，移動(dòng)版網(wǎng)站并沒(méi)有看起來(lái)那么獨(dú)立，使用者訪(fǎng)問(wèn)網(wǎng)站是通過(guò) URL 來(lái)訪(fǎng)問(wèn)的，將移動(dòng)網(wǎng)站和桌面網(wǎng)站分開(kāi)，如果不使用 RESS 技術(shù)，往往也就意味著要維護(hù)2個(gè)URL。于是，設(shè)計(jì)者還是得依靠前端或服務(wù)器端的一次 “響應(yīng)”(設(shè)備檢測(cè))做 URL 重定向，才能將不同設(shè)備的用戶(hù)帶到那個(gè)為他們準(zhǔn)備的網(wǎng)站。

相比較PC端頁(yè)面和移動(dòng)端頁(yè)面分別設(shè)計(jì)的弊端，響應(yīng)式Web設(shè)計(jì)則具有以下優(yōu)點(diǎn)：①設(shè)計(jì)元素很容易被復(fù)用，設(shè)計(jì)成本低；②前端只需要維護(hù)一套CSS代碼，維護(hù)成本低；③PC端與移動(dòng)端的設(shè)計(jì)十分接近，方便用戶(hù)使用；④不需要任何服務(wù)器端的支持。

2基于響應(yīng)式Web的農(nóng)業(yè)網(wǎng)站設(shè)計(jì)

2.1響應(yīng)式Web設(shè)計(jì)流程

2.1.1確定上網(wǎng)設(shè)備的類(lèi)型。上網(wǎng)設(shè)備調(diào)查可以幫助Web設(shè)計(jì)者了解用戶(hù)使用的設(shè)備類(lèi)型、屏幕尺寸、瀏覽器類(lèi)型及版本。上網(wǎng)設(shè)備類(lèi)型主要調(diào)查移動(dòng)終端(手機(jī)、平板電腦)和上網(wǎng)本、筆記本電腦和PC，甚至是信息家電。屏幕尺寸調(diào)查主要掌握屏幕的尺寸和長(zhǎng)寬比例。

瀏覽器類(lèi)型調(diào)查主要掌握瀏覽器類(lèi)型、采用內(nèi)核引擎及版本，通過(guò)調(diào)查最終確定出一份上網(wǎng)設(shè)備支持列表。響應(yīng)式Web設(shè)計(jì)的目的在于針對(duì)不同設(shè)備的屏幕特性進(jìn)行功能及內(nèi)容的界面預(yù)設(shè)，對(duì)于用戶(hù)不太明確的項(xiàng)目，可選擇桌面顯示器、iPad和主流智能手機(jī)作為主要代表性的設(shè)備，而不必顧全所有已知的設(shè)備規(guī)格類(lèi)型。

農(nóng)業(yè)網(wǎng)站的外在設(shè)計(jì)需要符合國(guó)家對(duì)“三農(nóng)”事業(yè)的要求，為開(kāi)創(chuàng)農(nóng)業(yè)科技事業(yè)發(fā)展新局面提供，功效一流、結(jié)構(gòu)優(yōu)化、安全可靠的信息化基礎(chǔ)條件和技術(shù)保障，要求其內(nèi)在設(shè)計(jì)需要使代碼和功能可以靈活而富有彈性，適應(yīng)響應(yīng)式設(shè)計(jì)的需求，同時(shí)兼顧后臺(tái)維護(hù)。因此，前期的站點(diǎn)規(guī)劃非常重要，需要協(xié)調(diào)和兼顧外在和內(nèi)在、前端和后臺(tái)的需求。

2.1.2前端響應(yīng)式流程。 前端響應(yīng)式流程見(jiàn)圖5。服務(wù)器端從客戶(hù)端接收到用戶(hù)的設(shè)備信息之后，由媒體查詢(xún)(Media Query)進(jìn)行用戶(hù)設(shè)備寬度大小的判斷。根據(jù)反饋的不同的頁(yè)面寬度大小，將不同的CSS3元素布局方法傳送到不同尺寸的客戶(hù)終端設(shè)備上，實(shí)現(xiàn)真正的響應(yīng)式布局。

圖5　前端響應(yīng)式流程Fig.5　The flow chart of responsive web design

2.1.3響應(yīng)式設(shè)計(jì)原則。 響應(yīng)式網(wǎng)頁(yè)的開(kāi)發(fā)當(dāng)中需要遵守以下基本原則:

(1)從小屏幕開(kāi)始。設(shè)計(jì)應(yīng)先從最小的屏幕尺寸開(kāi)始，然后直至最寬屏幕尺寸。因?yàn)樾∑聊簧显O(shè)計(jì)者最終只會(huì)使用確實(shí)能融入到設(shè)計(jì)中的內(nèi)容，它將迫使設(shè)計(jì)者更關(guān)注內(nèi)容，而不是因?yàn)榭臻g較大就把所有內(nèi)容都隨意堆放在一起。不過(guò)首先從小屏幕開(kāi)始并不意味著在設(shè)計(jì)過(guò)程中就不考慮大屏幕，有時(shí)在大、小屏幕間轉(zhuǎn)換對(duì)頁(yè)面設(shè)計(jì)會(huì)更有幫助。

(2)觸控優(yōu)先原則。易于手指觸摸的按鈕同樣易于鼠標(biāo)點(diǎn)擊，但反之則不然。因此為了使界面能夠適用于更多的平臺(tái)環(huán)境，應(yīng)該在觸控優(yōu)先原則的基礎(chǔ)上將原始設(shè)計(jì)方案進(jìn)行微調(diào)，最終達(dá)到一種折中的狀態(tài)，既適合手指觸摸又適合鼠標(biāo)點(diǎn)擊。

(3)移動(dòng)優(yōu)先原則。從移動(dòng)端開(kāi)始產(chǎn)品的設(shè)計(jì)工作，能夠讓設(shè)計(jì)人員關(guān)注到對(duì)用戶(hù)來(lái)說(shuō)什么才是設(shè)備上出現(xiàn)的重大問(wèn)題。同時(shí)要特別留意那些不具備跨平臺(tái)能力的交互形式，其中最常見(jiàn)的一個(gè)問(wèn)題就是觸屏設(shè)備通常無(wú)法支持傳統(tǒng)設(shè)備當(dāng)中的鼠標(biāo)懸停狀態(tài)[7]。

2.2界面布局設(shè)計(jì)響應(yīng)式設(shè)計(jì)的頁(yè)面布局基于頁(yè)面的設(shè)計(jì)單位可分為可切換的固定布局、彈性布局和混合布局3種(圖6)。

(1)可切換的固定布局。以像素(px)作為頁(yè)面設(shè)計(jì)單位，參考主流設(shè)備尺寸，設(shè)計(jì)多套不同寬度的布局。通過(guò)媒體查詢(xún)技術(shù)，選擇最合適的寬度布局，如圖6a所示。

(2)彈性布局。以百分比作為頁(yè)面設(shè)計(jì)單位，可以適應(yīng)所有主流設(shè)備的寬度尺寸，并能完美利用有效空間展現(xiàn)最佳效果，如圖6b所示。

(3)混合布局。以像素和百分比兩種單位作為頁(yè)面設(shè)計(jì)單位，可以適應(yīng)所有尺寸的設(shè)備屏幕的寬度要求，并能為不同尺寸設(shè)備提供最佳的瀏覽效果，如圖6c所示。

圖6　基于頁(yè)面設(shè)計(jì)單位的響應(yīng)式Web布局分類(lèi)Fig.6　Types of responsive web design based on design unit

圖7　響應(yīng)式Web整體模塊中的內(nèi)容排布示意Fig.7　Content arrangement in responsive web module

圖6中，可切換的固定布局的設(shè)計(jì)成本最低，但適應(yīng)性比較差，而彈性布局與混合布局效果具有響應(yīng)性，以上3種都是比較理想的響應(yīng)式布局實(shí)現(xiàn)方式。對(duì)于不同類(lèi)型的頁(yè)面排版布局需要采用不同的實(shí)現(xiàn)方式，其中通欄結(jié)構(gòu)設(shè)計(jì)更適合采用彈性布局方式，而對(duì)于非等分的多欄結(jié)構(gòu)往往采用混合布局的實(shí)現(xiàn)方式。

要兼容所有設(shè)備，布局響應(yīng)時(shí)不可避免地需要對(duì)模塊布局做一些變化，設(shè)計(jì)者通過(guò)媒體查詢(xún)功能獲取設(shè)備的屏幕寬度參數(shù)，對(duì)應(yīng)改變網(wǎng)頁(yè)的布局，這一過(guò)程可以稱(chēng)為布局響應(yīng)。

頁(yè)面中整體模塊布局不發(fā)生變化，而改變內(nèi)容排布，有如圖7所示的3種方式：

① 模塊中內(nèi)容的擠壓-拉伸(圖7a)；② 模塊中內(nèi)容的換行-平鋪(圖7b)；③ 模塊中內(nèi)容的刪減-增加(圖7c)。

頁(yè)面中的整體模塊布局發(fā)生變化，有如圖8所示的3種方式：①模塊位置變換(圖8a)；②模塊展示方式改變，如隱藏-展開(kāi)(圖8b)；③模塊數(shù)量改變，如刪減-增加(圖8c)。

圖8　響應(yīng)式Web整體模塊布局變化示意Fig.8　Arrangement change in responsive web module

以上介紹基本包括了響應(yīng)式設(shè)計(jì)的常用布局方式，但在實(shí)際設(shè)計(jì)中簡(jiǎn)單地使用一種布局方式還是無(wú)法滿(mǎn)足需要，也需要頁(yè)面設(shè)計(jì)者在實(shí)際設(shè)計(jì)中結(jié)合自身特點(diǎn)使用組合方式進(jìn)行布局；還要遵循同一斷點(diǎn)保持統(tǒng)一邏輯布局，同時(shí)保持簡(jiǎn)潔、輕巧的設(shè)計(jì)原則。

3結(jié)語(yǔ)

綜上所述，響應(yīng)式Web從設(shè)計(jì)到實(shí)現(xiàn)體現(xiàn)了一種高度適應(yīng)性的設(shè)計(jì)思維模式，對(duì)網(wǎng)站內(nèi)容的要求只是初級(jí)階段的要求，在當(dāng)今“用戶(hù)至上”的互聯(lián)網(wǎng)思維概念下，更好的用戶(hù)體驗(yàn)、為用戶(hù)使用習(xí)慣打造的瀏覽方式必將成為設(shè)計(jì)趨勢(shì)。農(nóng)業(yè)網(wǎng)站由于面對(duì)更廣泛的人群和市場(chǎng)，進(jìn)行響應(yīng)式Web設(shè)計(jì)顯得更有必要。該研究對(duì)響應(yīng)式Web設(shè)計(jì)的分析和研究為農(nóng)業(yè)網(wǎng)站的響應(yīng)式設(shè)計(jì)提供了參考和幫助。響應(yīng)式設(shè)計(jì)本身不是目的，如何基于任意設(shè)備對(duì)頁(yè)面內(nèi)容進(jìn)行完美規(guī)劃以及簡(jiǎn)便的工作流程，最終實(shí)現(xiàn)為“三農(nóng)”服務(wù)的信息化建設(shè)才是信息化研究者更大的課題。

參考文獻(xiàn)

[1] 中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心(CNNIC)(2015)第35次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[EB/OL].[2015-11-01].http://www.cnnic.cn/gywm/xwzx/rdxw/2015/201502/W020150203456823090968.pdf.

[2] FRAIN B.Responsive web design with HTML5 and CSS3[M].Birmingham:Packt Publishing,2012:10-11.

[3] 劉杰.Web標(biāo)準(zhǔn)設(shè)計(jì)[M].北京：清華大學(xué)出版社，2009.

[4] 叢琳.網(wǎng)頁(yè)配色構(gòu)圖細(xì)節(jié)設(shè)計(jì)[M].北京：人民郵電出版社,2008.

[5] CEDERHOLM D.無(wú)懈可擊的Web設(shè)計(jì)：利用XHTML 和CSS 提高網(wǎng)站的靈活性與適應(yīng)性[M].劉建寧，譯.2版.北京:清華大學(xué)出版社，2009:195-238.

[6] PETERSON C.學(xué)習(xí)響應(yīng)式設(shè)計(jì)[M].文巍，譯.北京：人民郵電出版社，2015.

[7] 施瑩.多樣化設(shè)備Web設(shè)計(jì)解決方案[J].中國(guó)科技信息,2013(11)：105-106.

Agricultural website Design method based on responsive web design

XIE Hui, YANG Xiao-rong, ZHANG Li-ping et al (Agricultural Information Institute of CAAS； Key Laboratory of Digita Agricultural Early-warning Technology, Ministry of Agriculture, Beijing 100081)

AbstractWeb design responsive has become the mainstream of web design because of its adaptation to the characteristics of the whole devices. Based on the introduction and analysis of key technologies of web design responsive, we put forward the design process of web design responsive, and gave a variety of solutions to the layout of the pages. In the meantime, references were provided to the construction of agricultural websites according to the current situation of domestic and international applications.

Key wordsResponsive web design; html5; css3; Media query

收稿日期2015-11-30

作者簡(jiǎn)介謝輝(1978-)，男，北京人，助理研究員，碩士，從事農(nóng)業(yè)信息技術(shù)研究。

基金項(xiàng)目中國(guó)農(nóng)業(yè)科學(xué)院農(nóng)業(yè)信息研究所2015年度基本科研業(yè)務(wù)費(fèi)專(zhuān)項(xiàng)(2015-J-08)；中國(guó)農(nóng)業(yè)科學(xué)院科技創(chuàng)新工程項(xiàng)目。

中圖分類(lèi)號(hào)S 126

文獻(xiàn)標(biāo)識(shí)碼A

文章編號(hào)0517-6611(2016)02-330-05