響應(yīng)式Web設(shè)計(jì)在移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)中的應(yīng)用

摘 要：隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的高速發(fā)展，各種智能移動(dòng)設(shè)備在大學(xué)生中迅速普及，越來(lái)越多的大學(xué)生在生活和學(xué)習(xí)中習(xí)慣使用移動(dòng)設(shè)備來(lái)訪問(wèn)各種網(wǎng)站。本文提出建設(shè)響應(yīng)式的移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)，為師生使用移動(dòng)設(shè)備訪問(wèn)此實(shí)訓(xùn)互動(dòng)平臺(tái)提供解決方法，便于教師和學(xué)生就實(shí)訓(xùn)過(guò)程中的問(wèn)題隨時(shí)隨地進(jìn)行溝通和互動(dòng)，實(shí)現(xiàn)職業(yè)院校實(shí)訓(xùn)教學(xué)的信息化、科學(xué)化和智能化。

關(guān)鍵詞：移動(dòng)設(shè)備；響應(yīng)式Web設(shè)計(jì)；媒體查詢；彈性布局

中圖分類號(hào)：TP393.09 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2018）04-0105-02

Abstract：With the rapid development of computer network technology，all kinds of intelligent mobile devices are widely popularized among college students. More and more college students use mobile devices to visit various websites for life and study. This paper proposes building a responsive mobile training interactive platform，which provides a solution for teachers and students to use mobile devices to access this platform. It is convenient for teachers and students to communicate and interact at any time and anywhere in the training process，to realize the informalization，scientification and intelligence of the training teaching in vocational colleges.

Keywords：mobile devices；responsive Web design；media query；flexible box

0 引 言

實(shí)訓(xùn)教學(xué)是高等職業(yè)院校技能型人才培養(yǎng)的重要手段，是提高人才培養(yǎng)質(zhì)量的關(guān)鍵。早在2006年，《教育部關(guān)于職業(yè)院校試行工學(xué)結(jié)合、半工半讀的意見(jiàn)》就出臺(tái)了，開(kāi)始在職業(yè)院校中大力推行工學(xué)結(jié)合、校企合作的人才培養(yǎng)模式。隨后，很多高職院校帶頭進(jìn)行了一些有益的嘗試，但在實(shí)際操作過(guò)程中遇到諸多問(wèn)題，并沒(méi)有把工學(xué)結(jié)合和校企合作落到實(shí)處。因此，利用計(jì)算機(jī)軟件技術(shù)構(gòu)建一種基于B/S模式的移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)，側(cè)重實(shí)訓(xùn)過(guò)程中師生的互動(dòng)性和教學(xué)的生動(dòng)性，對(duì)于改變傳統(tǒng)實(shí)訓(xùn)教學(xué)模式具有重要的探索意義。

1 移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)發(fā)展現(xiàn)狀

國(guó)外發(fā)達(dá)國(guó)家職業(yè)院校的實(shí)訓(xùn)教學(xué)大多與理論教學(xué)融為一體，一般采取“教學(xué)做一體”的教學(xué)模式，實(shí)訓(xùn)互動(dòng)平臺(tái)是教學(xué)管理系統(tǒng)的重要組成部分[1]。國(guó)內(nèi)高職院校當(dāng)前的教學(xué)管理系統(tǒng)主要用于完成日常教務(wù)管理工作，實(shí)訓(xùn)教學(xué)管理還存在管理不到位、沒(méi)有互動(dòng)元素、缺少企業(yè)參與等問(wèn)題，實(shí)訓(xùn)教學(xué)管理嚴(yán)重滯后于人才培養(yǎng)需要。

近年來(lái)，隨著我國(guó)經(jīng)濟(jì)的騰飛和移動(dòng)互聯(lián)網(wǎng)技術(shù)的快速發(fā)展，移動(dòng)互聯(lián)網(wǎng)用戶數(shù)一直保持著快速增長(zhǎng)的態(tài)勢(shì)。截至2017年11月，我國(guó)已有超過(guò)12.5億移動(dòng)互聯(lián)網(wǎng)用戶，移動(dòng)用戶規(guī)模早已超過(guò)了PC用戶。在校高職學(xué)生幾乎人手一部智能手機(jī)或者其他移動(dòng)設(shè)備。因此，當(dāng)前構(gòu)建適應(yīng)我國(guó)高職院校教學(xué)管理需要的移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)，不僅能利用學(xué)生手中的智能設(shè)備開(kāi)展實(shí)訓(xùn)教學(xué)，更能推動(dòng)高等職業(yè)院校實(shí)訓(xùn)教學(xué)工作的發(fā)展。

2 響應(yīng)式Web設(shè)計(jì)簡(jiǎn)介

2.1 響應(yīng)式Web設(shè)計(jì)的概念

美國(guó)網(wǎng)頁(yè)設(shè)計(jì)師伊?！ゑR科特（Ethan Marcotte）在2010年提出了“響應(yīng)式Web設(shè)計(jì)”的概念，響應(yīng)式Web設(shè)計(jì)是指隨著訪問(wèn)設(shè)備的變化和用戶行為的改變，頁(yè)面的顯示將自動(dòng)進(jìn)行響應(yīng)和調(diào)整。無(wú)論使用哪種設(shè)備（手機(jī)、iPad和筆記本）訪問(wèn)響應(yīng)式網(wǎng)頁(yè)，頁(yè)面都能夠自動(dòng)調(diào)整布局、改變圖片尺寸以適應(yīng)不同大小的設(shè)備。采用響應(yīng)式Web設(shè)計(jì)技術(shù)制作的網(wǎng)站，網(wǎng)頁(yè)將能夠在各種移動(dòng)設(shè)備上完美顯示[2]。

2.2 響應(yīng)式Web設(shè)計(jì)的關(guān)鍵技術(shù)

響應(yīng)式Web設(shè)計(jì)整合了媒體查詢、彈性布局、彈性圖片/媒體三種已有技術(shù)[3]。其中，媒體查詢負(fù)責(zé)按移動(dòng)設(shè)備類型來(lái)調(diào)整網(wǎng)頁(yè)布局，彈性布局和彈性圖片/媒體控制視覺(jué)元素的自適應(yīng)顯示。

媒體查詢技術(shù)是制作響應(yīng)式網(wǎng)頁(yè)的關(guān)鍵，使用媒體查詢可以針對(duì)不同屏幕尺寸的設(shè)備定義不同的樣式。在媒體查詢中可以添加零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，如果媒體查詢中指定的媒體類型和顯示文檔所使用的設(shè)備類型一致，并且所有表達(dá)式的值都是true，那么該媒體查詢的結(jié)果就為true，將執(zhí)行媒體查詢中的相應(yīng)代碼。

從2015年開(kāi)始，CSS推出了一個(gè)叫“彈性盒子”（Flexbox）的布局模塊。使用它可以實(shí)現(xiàn)無(wú)數(shù)種可能的布局，這種布局機(jī)制非常適合響應(yīng)式設(shè)計(jì)，也就是我們常說(shuō)的彈性布局。

彈性圖片/媒體包括文字、圖片、視頻、動(dòng)畫等可視媒體，要實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)效果，需要對(duì)各種視覺(jué)媒體進(jìn)行彈性化處理[4]。網(wǎng)頁(yè)中的圖片大多是使用Photoshop、Fireworks等圖形處理軟件制作處理的，以固定寬度來(lái)衡量大小。響應(yīng)式Web必須使圖片也是響應(yīng)式的，這就需要我們將傳統(tǒng)固定像素大小的圖片轉(zhuǎn)換為按比例大小來(lái)顯示。

3 響應(yīng)式Web設(shè)計(jì)在移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)中的應(yīng)用

3.1 前期分析

本文以高職院校實(shí)訓(xùn)教學(xué)的管理現(xiàn)狀和需要為背景，擬構(gòu)建基于響應(yīng)式Web設(shè)計(jì)的移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)，實(shí)現(xiàn)職業(yè)院校實(shí)訓(xùn)教學(xué)工作的信息化、科學(xué)化和智能化。滿足教師指導(dǎo)學(xué)生實(shí)訓(xùn)的需要，對(duì)學(xué)生實(shí)訓(xùn)過(guò)程中的問(wèn)題隨時(shí)進(jìn)行溝通、交流、互動(dòng)和指導(dǎo)。

由于本實(shí)訓(xùn)互動(dòng)平臺(tái)的主要用戶為校內(nèi)師生，因此，項(xiàng)目開(kāi)發(fā)初期，采用調(diào)查問(wèn)卷的方式對(duì)用戶進(jìn)行了需求分析和調(diào)研。大致了解了師生訪問(wèn)此平臺(tái)所使用的移動(dòng)設(shè)備類型分布及存在的主要問(wèn)題，確定了實(shí)訓(xùn)互動(dòng)平臺(tái)的功能性需求和非功能性需求。設(shè)計(jì)出實(shí)訓(xùn)互動(dòng)平臺(tái)幾種典型的響應(yīng)規(guī)格，以便在不同移動(dòng)設(shè)備上都能很好地展示網(wǎng)頁(yè)內(nèi)容。

3.2 響應(yīng)式Web設(shè)計(jì)在移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)中的應(yīng)用

3.2.1 設(shè)置Viewport

大多數(shù)移動(dòng)瀏覽器默認(rèn)情況下會(huì)自動(dòng)將HTML頁(yè)面放大為寬的視圖以符合屏幕分辨率。因此，進(jìn)行響應(yīng)式Web設(shè)計(jì)之前，首先需要在頁(yè)面

上面的代碼中，width=device-width表示網(wǎng)頁(yè)的寬度就是設(shè)備屏幕的寬度，initial-scale=1.0表示設(shè)置頁(yè)面的縮放比為1，不讓頁(yè)面進(jìn)行縮放。

3.2.2 制定媒體查詢規(guī)則

響應(yīng)式Web設(shè)計(jì)的核心內(nèi)容是媒體查詢，媒體查詢表達(dá)式由設(shè)備類型和一個(gè)或多個(gè)檢測(cè)媒體特性的聲明構(gòu)成，聲明由媒體特性名稱和值構(gòu)成，中間用冒號(hào)“：”分隔[5]。它根據(jù)設(shè)置的條件通知瀏覽器如何來(lái)渲染頁(yè)面。本文中的移動(dòng)實(shí)訓(xùn)互動(dòng)平臺(tái)中，按照用戶訪問(wèn)的設(shè)備類型，把移動(dòng)設(shè)備按寬度大致分為三種類型：超小屏幕設(shè)備（手機(jī)等，寬度小于768px）、小屏幕設(shè)備（平板等，寬度大于等于768px）和大屏幕設(shè)備（PC機(jī)等，寬度大于992px）。代碼如下：

@media screen and （max-width：768px）{/*超小屏幕設(shè)備（手機(jī)等，寬度小于768px）*/}

@media screen and （min-width：768px）and（max-width：992px）{/*小屏幕設(shè)備（平板等，寬度大于等于768px）*/}

@media screen and （min-width：992px）{/*大屏幕設(shè)備（PC機(jī)等，寬度大于992px）*/}

3.2.3 設(shè)置彈性布局和彈性圖片/媒體

為了使頁(yè)面和視覺(jué)媒體能夠進(jìn)行彈性布局，在編寫CSS樣式時(shí)一般不使用絕對(duì)寬度值和字體大小，定義寬和高的時(shí)候不使用像素（width：px）單位，只使用百分比（width：%）或者（width：auto）定義高和寬。定義字體大小也使用相對(duì)單位（em），不使用像素（px）。

為了使圖片在訪問(wèn)設(shè)備中能夠響應(yīng)式地顯示，設(shè)置頁(yè)面所有圖片的CSS代碼如下：img {width：100%；max-width：100%；height：auto；}

4 結(jié) 論

如今，人們?cè)诠ぷ骱蛯W(xué)習(xí)中對(duì)移動(dòng)設(shè)備的使用越來(lái)越頻繁。如何使用響應(yīng)式Web設(shè)計(jì)方法建立網(wǎng)站或系統(tǒng)，使其在多種移動(dòng)設(shè)備中均能很好地呈現(xiàn)，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)是很迫切的考驗(yàn)[6]。本文以實(shí)際項(xiàng)目為背景，論述了響應(yīng)式Web設(shè)計(jì)在實(shí)訓(xùn)互動(dòng)平臺(tái)中的具體應(yīng)用，為移動(dòng)平臺(tái)響應(yīng)式網(wǎng)站開(kāi)發(fā)提供了可行的解決方案，節(jié)省了開(kāi)發(fā)成本和時(shí)間，改善了用戶體驗(yàn)。相信在不久的將來(lái)，在各種類型的應(yīng)用中，響應(yīng)式Web設(shè)計(jì)會(huì)越來(lái)越普遍，越來(lái)越受歡迎。

參考文獻(xiàn)：

[1] 葉小琴.教學(xué)管理信息化建設(shè)的探索與實(shí)踐 [J].教學(xué)與管理.2013（24）：28-30.

[2] John Allsopp.Web標(biāo)準(zhǔn)開(kāi)發(fā)之道 [M].雷鈞鈞，?？?，等，譯.北京：機(jī)械工業(yè)出版社，2011.

[3] 邢希，田興彥，王世運(yùn).響應(yīng)式Web設(shè)計(jì)方法的研究 [J].瓊州學(xué)院學(xué)報(bào)，2013，20（2）：36-38.

[4] 馮春英.基于響應(yīng)式Web設(shè)計(jì)的新型圖書館門戶網(wǎng)站構(gòu)建 [J].圖書館學(xué)研究，2015（15）：34-40.

[5] Ethan Marcotte .Responsive Web Design [EB/OL]. http：//alistapart.com/article/responsive-web-design，2010-05-25.

[6] 張幸芝，徐東東，賈菲.基于響應(yīng)式Web設(shè)計(jì)的教務(wù)系統(tǒng)移動(dòng)平臺(tái)研究與建設(shè) [J].軟件，2013，34（6）：5-7.

作者簡(jiǎn)介：趙衛(wèi)東（1979.12-），男，安徽無(wú)為人，講師，碩士。研究方向：計(jì)算機(jī)應(yīng)用、軟件工程等。