摘 要：隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的高速發(fā)展，各種智能移動(dòng)設(shè)備在大學(xué)生中迅速普及，越來越多的大學(xué)生在生活和學(xué)習(xí)中習(xí)慣使用移動(dòng)設(shè)備來訪問各種網(wǎng)站。本文提出建設(shè)響應(yīng)式的移動(dòng)實(shí)訓(xùn)互動(dòng)平臺，為師生使用移動(dòng)設(shè)備訪問此實(shí)訓(xùn)互動(dòng)平臺提供解決方法，便于教師和學(xué)生就實(shí)訓(xù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ì)；媒體查詢；彈性布局

中圖分類號：TP393.09 文獻(xiàn)標(biāo)識碼：A 文章編號：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é)合、半工半讀的意見》就出臺了，開始在職業(yè)院校中大力推行工學(xué)結(jié)合、校企合作的人才培養(yǎng)模式。隨后，很多高職院校帶頭進(jìn)行了一些有益的嘗試，但在實(shí)際操作過程中遇到諸多問題，并沒有把工學(xué)結(jié)合和校企合作落到實(shí)處。因此，利用計(jì)算機(jī)軟件技術(shù)構(gòu)建一種基于B/S模式的移動(dòng)實(shí)訓(xùn)互動(dòng)平臺，側(cè)重實(shí)訓(xùn)過程中師生的互動(dòng)性和教學(xué)的生動(dòng)性，對于改變傳統(tǒng)實(shí)訓(xùn)教學(xué)模式具有重要的探索意義。

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

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

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

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

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

美國網(wǎng)頁設(shè)計(jì)師伊?！ゑR科特（Ethan Marcotte）在2010年提出了“響應(yīng)式Web設(shè)計(jì)”的概念，響應(yīng)式Web設(shè)計(jì)是指隨著訪問設(shè)備的變化和用戶行為的改變，頁面的顯示將自動(dòng)進(jìn)行響應(yīng)和調(diào)整。無論使用哪種設(shè)備（手機(jī)、iPad和筆記本）訪問響應(yīng)式網(wǎng)頁，頁面都能夠自動(dòng)調(diào)整布局、改變圖片尺寸以適應(yīng)不同大小的設(shè)備。采用響應(yīng)式Web設(shè)計(jì)技術(shù)制作的網(wǎng)站，網(wǎng)頁將能夠在各種移動(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è)備類型來調(diào)整網(wǎng)頁布局，彈性布局和彈性圖片/媒體控制視覺元素的自適應(yīng)顯示。

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

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

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

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

3.1 前期分析

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

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

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

3.2.1 設(shè)置Viewport

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

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

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

響應(yīng)式Web設(shè)計(jì)的核心內(nèi)容是媒體查詢，媒體查詢表達(dá)式由設(shè)備類型和一個(gè)或多個(gè)檢測媒體特性的聲明構(gòu)成，聲明由媒體特性名稱和值構(gòu)成，中間用冒號“：”分隔[5]。它根據(jù)設(shè)置的條件通知瀏覽器如何來渲染頁面。本文中的移動(dòng)實(shí)訓(xùn)互動(dòng)平臺中，按照用戶訪問的設(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è)置彈性布局和彈性圖片/媒體

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

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

4 結(jié) 論

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

參考文獻(xiàn)：

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

[2] John Allsopp.Web標(biāo)準(zhǔn)開發(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)平臺研究與建設(shè) [J].軟件，2013，34（6）：5-7.

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