響應式Web設計在移動實訓互動平臺中的應用

摘 要：隨著計算機網絡技術的高速發展，各種智能移動設備在大學生中迅速普及，越來越多的大學生在生活和學習中習慣使用移動設備來訪問各種網站。本文提出建設響應式的移動實訓互動平臺，為師生使用移動設備訪問此實訓互動平臺提供解決方法，便于教師和學生就實訓過程中的問題隨時隨地進行溝通和互動，實現職業院校實訓教學的信息化、科學化和智能化。

關鍵詞：移動設備；響應式Web設計；媒體查詢；彈性布局

中圖分類號：TP393.09 文獻標識碼：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 引 言

實訓教學是高等職業院校技能型人才培養的重要手段，是提高人才培養質量的關鍵。早在2006年，《教育部關于職業院校試行工學結合、半工半讀的意見》就出臺了，開始在職業院校中大力推行工學結合、校企合作的人才培養模式。隨后，很多高職院校帶頭進行了一些有益的嘗試，但在實際操作過程中遇到諸多問題，并沒有把工學結合和校企合作落到實處。因此，利用計算機軟件技術構建一種基于B/S模式的移動實訓互動平臺，側重實訓過程中師生的互動性和教學的生動性，對于改變傳統實訓教學模式具有重要的探索意義。

1 移動實訓互動平臺發展現狀

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

近年來，隨著我國經濟的騰飛和移動互聯網技術的快速發展，移動互聯網用戶數一直保持著快速增長的態勢。截至2017年11月，我國已有超過12.5億移動互聯網用戶，移動用戶規模早已超過了PC用戶。在校高職學生幾乎人手一部智能手機或者其他移動設備。因此，當前構建適應我國高職院校教學管理需要的移動實訓互動平臺，不僅能利用學生手中的智能設備開展實訓教學，更能推動高等職業院校實訓教學工作的發展。

2 響應式Web設計簡介

2.1 響應式Web設計的概念

美國網頁設計師伊桑·馬科特（Ethan Marcotte）在2010年提出了“響應式Web設計”的概念，響應式Web設計是指隨著訪問設備的變化和用戶行為的改變，頁面的顯示將自動進行響應和調整。無論使用哪種設備（手機、iPad和筆記本）訪問響應式網頁，頁面都能夠自動調整布局、改變圖片尺寸以適應不同大小的設備。采用響應式Web設計技術制作的網站，網頁將能夠在各種移動設備上完美顯示[2]。

2.2 響應式Web設計的關鍵技術

響應式Web設計整合了媒體查詢、彈性布局、彈性圖片/媒體三種已有技術[3]。其中，媒體查詢負責按移動設備類型來調整網頁布局，彈性布局和彈性圖片/媒體控制視覺元素的自適應顯示。

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

從2015年開始，CSS推出了一個叫“彈性盒子”（Flexbox）的布局模塊。使用它可以實現無數種可能的布局，這種布局機制非常適合響應式設計，也就是我們常說的彈性布局。

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

3 響應式Web設計在移動實訓互動平臺中的應用

3.1 前期分析

本文以高職院校實訓教學的管理現狀和需要為背景，擬構建基于響應式Web設計的移動實訓互動平臺，實現職業院校實訓教學工作的信息化、科學化和智能化。滿足教師指導學生實訓的需要，對學生實訓過程中的問題隨時進行溝通、交流、互動和指導。

由于本實訓互動平臺的主要用戶為校內師生，因此，項目開發初期，采用調查問卷的方式對用戶進行了需求分析和調研。大致了解了師生訪問此平臺所使用的移動設備類型分布及存在的主要問題，確定了實訓互動平臺的功能性需求和非功能性需求。設計出實訓互動平臺幾種典型的響應規格，以便在不同移動設備上都能很好地展示網頁內容。

3.2 響應式Web設計在移動實訓互動平臺中的應用

3.2.1 設置Viewport

大多數移動瀏覽器默認情況下會自動將HTML頁面放大為寬的視圖以符合屏幕分辨率。因此，進行響應式Web設計之前，首先需要在頁面

上面的代碼中，width=device-width表示網頁的寬度就是設備屏幕的寬度，initial-scale=1.0表示設置頁面的縮放比為1，不讓頁面進行縮放。

3.2.2 制定媒體查詢規則

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

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

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

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

3.2.3 設置彈性布局和彈性圖片/媒體

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

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

4 結 論

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

參考文獻：

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

[2] John Allsopp.Web標準開發之道 [M].雷鈞鈞，常可，等，譯.北京：機械工業出版社，2011.

[3] 邢希，田興彥，王世運.響應式Web設計方法的研究 [J].瓊州學院學報，2013，20（2）：36-38.

[4] 馮春英.基于響應式Web設計的新型圖書館門戶網站構建 [J].圖書館學研究，2015（15）：34-40.

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

[6] 張幸芝，徐東東，賈菲.基于響應式Web設計的教務系統移動平臺研究與建設 [J].軟件，2013，34（6）：5-7.

作者簡介：趙衛東（1979.12-），男，安徽無為人，講師，碩士。研究方向：計算機應用、軟件工程等。