摘 要：隨著移動(dòng)互聯(lián)網(wǎng)的普及，移動(dòng)互聯(lián)終端應(yīng)用不斷豐富，但傳統(tǒng)網(wǎng)頁在不同終端上顯示存在效果不佳問題。結(jié)合不同設(shè)備尺寸，以媒體查詢技術(shù)為基礎(chǔ)，進(jìn)行響應(yīng)式網(wǎng)頁設(shè)計(jì)，介紹基于媒體查詢的響應(yīng)式網(wǎng)頁設(shè)計(jì)原理、設(shè)計(jì)思想與相關(guān)技術(shù)，并結(jié)合實(shí)踐案例分析響應(yīng)式網(wǎng)頁在移動(dòng)小屏幕、中小屏幕以及大屏幕上顯示效果的設(shè)計(jì)步驟與技術(shù)要點(diǎn)，為響應(yīng)式網(wǎng)頁開發(fā)提供技術(shù)參考。

關(guān)鍵詞：媒體查詢；響應(yīng)式網(wǎng)頁；CSS；網(wǎng)頁實(shí)踐；網(wǎng)頁設(shè)計(jì)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：2095-2945（2024）23-0129-04

Abstract： With the popularity of mobile Internet， the applications of mobile Internet terminals are becoming more and more abundant， but the display effect of traditional web pages on different terminals is not good. Combined with different equipment sizes， based on media query technology， responsive web page design is carried out， and the design principle， design idea and related technology of responsive web page based on media query are introduced. Based on practical cases， the design steps and technical points of the display effect of responsive web pages on mobile small screen， small and medium-sized screen and large screen are analyzed， so as to provide technical reference for developing responsive web pages.

Keywords： media query; responsive web page; CSS; web page practice; web page design

隨著移動(dòng)互聯(lián)網(wǎng)的普及，移動(dòng)互聯(lián)終端應(yīng)用不斷豐富，移動(dòng)智能設(shè)備也逐漸走進(jìn)人們的日常生活，被越來越廣泛地應(yīng)用，并成為訪問互聯(lián)網(wǎng)的主流終端設(shè)備。由于移動(dòng)終端的多樣化，傳統(tǒng)網(wǎng)頁設(shè)計(jì)方式會(huì)使得用戶在訪問網(wǎng)頁過程中，出現(xiàn)超出屏幕顯示范圍、界面混亂、文字或圖片堆疊顯示和橫屏與豎屏不能及時(shí)轉(zhuǎn)換等現(xiàn)象，從而造成不友好的用戶訪問體驗(yàn)。這時(shí)，如果采用響應(yīng)式網(wǎng)頁設(shè)計(jì)，可以很好地解決以上問題。

1 適配問題

在網(wǎng)頁設(shè)計(jì)過程中，針對(duì)不同的設(shè)備以及瀏覽器版本，網(wǎng)頁顯示布局會(huì)有變化。移動(dòng)瀏覽器廠商會(huì)根據(jù)不同設(shè)備的屏幕進(jìn)行相應(yīng)的適配設(shè)計(jì)，比如6.5寸的4K手機(jī)和6.5寸2K的手機(jī)，可能會(huì)設(shè)置為一樣寬度的獨(dú)立像素，使得顯示的內(nèi)容為理想寬度。網(wǎng)頁CSS樣式代碼中的1 px，不能夠直接采納屏幕物理分辨率的1 px，需要考慮操作系統(tǒng)或者瀏覽器的實(shí)際屏幕分辨率，也就是物理像素，才能在不同設(shè)備打開時(shí)，都可以以最理想的狀態(tài)呈現(xiàn)出來[1]。Window對(duì)象里面有一個(gè)devicePixelRatio屬性，代表設(shè)備物理像素和設(shè)備獨(dú)立像素比，即“devicePixelRatio=物理像素/獨(dú)立像素”。CSS里的px可以看做獨(dú)立像素，而devicePixelRatio一般由瀏覽器所決定。所以，想要很好地解決響應(yīng)匹配的問題，需要進(jìn)行適配，以確保一套網(wǎng)站在設(shè)計(jì)布局時(shí)可以結(jié)合物理像素不同展現(xiàn)不同結(jié)構(gòu)，保證內(nèi)容呈現(xiàn)清晰、完整，既適用于PC端也適用于移動(dòng)端。響應(yīng)式網(wǎng)頁通過技術(shù)手段，很好地解決了適配問題。

2 響應(yīng)式網(wǎng)頁

響應(yīng)式網(wǎng)頁設(shè)計(jì)是專為改進(jìn)移動(dòng)互聯(lián)網(wǎng)瀏覽體驗(yàn)而提出的概念。它是一種頁面布局的設(shè)計(jì)方式，其理念是集中創(chuàng)建頁面的結(jié)構(gòu)，智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局，即一個(gè)網(wǎng)頁可以根據(jù)瀏覽設(shè)備的不同，例如，手機(jī)、pad和電腦端以及不同硬件特性而呈現(xiàn)出不同的布局方式，無需編寫多個(gè)不同的版本[2]。使得在不同的設(shè)備上，同一個(gè)網(wǎng)頁都有良好的用戶瀏覽體驗(yàn)。

響應(yīng)式網(wǎng)頁主要實(shí)現(xiàn)技術(shù)手段有媒體查詢、彈性圖片和流式布局，并結(jié)合Bootstrap框架來輔助實(shí)現(xiàn)響應(yīng)式網(wǎng)頁[3]。其中，媒體查詢（Media Query）是實(shí)現(xiàn)響應(yīng)式網(wǎng)頁的核心技術(shù)，也是CSS3模塊中的一部分。

3 基于媒體查詢的響應(yīng)式網(wǎng)頁設(shè)計(jì)

實(shí)現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計(jì)首先需要進(jìn)行的是媒體查詢，結(jié)合查詢到的不同設(shè)備屏幕尺寸，對(duì)頁面進(jìn)行更適配的布局樣式顯示。通常通過在網(wǎng)頁頭部head中添加meta標(biāo)簽來聲明視口，解決移動(dòng)設(shè)備不同尺寸問題[4]。

3.1 Viewport（視口）

Viewport（視口）概念，最早由蘋果公司在iOS系統(tǒng)中提出，后來Android系統(tǒng)也引入了該概念。這是一個(gè)移動(dòng)設(shè)備瀏覽器中專有的概念，PC瀏覽器會(huì)忽略此概念。視口是手機(jī)中用于顯示網(wǎng)頁內(nèi)容的虛擬窗口，所以也稱其為虛擬視口。在較小的物理屏幕下，可以瀏覽較大的網(wǎng)頁內(nèi)容。在移動(dòng)端，有３個(gè)視口狀態(tài)，如圖1所示，分別是布局視口、視覺視口和理想視口。布局視口與網(wǎng)頁寬度一致；視覺視口是用戶瀏覽網(wǎng)頁區(qū)域，如果超出范圍，可以通過拖拽滾動(dòng)條來實(shí)現(xiàn)查看；理想視口就是在解決適配問題后，將布局視口與視覺視口相適應(yīng)的狀態(tài)。

如圖2所示，在設(shè)定分辨率498×768后，使用相同樣式表進(jìn)行測(cè)試，左側(cè)是<meta>標(biāo)簽中沒有引入viewport時(shí)，直接調(diào)用CSS樣式文件，網(wǎng)頁在瀏覽器上顯示測(cè)試中的狀態(tài)；右側(cè)是引入了viewport，并設(shè)置了相關(guān)屬性，添加<meta name=“viewport”content=“width=device-width，initial-scale=1，user-scalable=no”>后，網(wǎng)頁顯示的測(cè)試狀態(tài)。可以看到，已經(jīng)對(duì)屏幕尺寸做出基本判斷，并呈現(xiàn)一定顯示適配效果。

其中，Content可以設(shè)置屬性包括以下內(nèi)容。

1）width指視口的寬度，可以取值為數(shù)值，或device-width（設(shè)備寬度）。

2）height為視口的高度，一般不用指定。

3）initial-scale為初始時(shí)的縮放倍率。

4）minimum-scale 為允許的最小縮放倍率。

5）maximum-scale為允許的最大縮放倍率。

6）user-scalable 為是否允許用戶手動(dòng)縮放，可取值1/0/yes/no。

3.2 媒體查詢技術(shù)原理與應(yīng)用

3.2.1 媒體查詢技術(shù)原理

Media Query（媒體查詢）技術(shù)，會(huì)根據(jù)當(dāng)前瀏覽設(shè)備類型以及物理特性方面的不同，檢測(cè)到viewport（視口）的寬度和高度，設(shè)備的實(shí)際寬度、旋轉(zhuǎn)方向等屬性，設(shè)計(jì)適合不同媒體屬性的、各種相適配的CSS代碼[5]。

其基本語法結(jié)構(gòu)是：

@media mediatype and |not |only（media feature）{

css-code

}

用“@media”開頭進(jìn)行聲明，設(shè)置媒體類型（mediatype）與媒體功能（media feature）。通過運(yùn)算符and|not|only，設(shè)置查詢規(guī)則，當(dāng)取值為真時(shí)，根據(jù)設(shè)定樣式代碼，使得各選擇器樣式生效。不同類型終端在加載網(wǎng)頁或者重置瀏覽器時(shí)，網(wǎng)頁會(huì)根據(jù)瀏覽器寬度或者媒體類型，執(zhí)行不同的CSS樣式，顯示出更加匹配的頁面布局效果[6]。

3.2.2 不同設(shè)備屏幕尺寸設(shè)定

為后續(xù)設(shè)計(jì)響應(yīng)式網(wǎng)頁時(shí)，可以更準(zhǔn)確地應(yīng)用媒體查詢，需提前明確設(shè)定常用不同設(shè)備屏幕寬度尺寸區(qū)間。

1）手機(jī)等小屏設(shè)備，屏幕尺寸小于768 px。

2）平板等中屏設(shè)備，屏幕尺寸在768 px到992 px之間。

3）桌面等設(shè)備，屏幕尺寸大于992 px。

4）大屏幕智能終端，屏幕尺寸大于1 200 px。

3.2.3 媒體查詢技術(shù)應(yīng)用

如果要保證可以適應(yīng)不同終端顯示效果，需要分別引入網(wǎng)頁在電腦端、pad端和手機(jī)端上顯示時(shí)的格式樣式，結(jié)合媒體查詢結(jié)果來顯示相應(yīng)網(wǎng)頁布局效果。類型可設(shè)定為screen（包括電腦屏幕、平板電腦、智能手機(jī)等）、媒體特性和CSS樣式。媒體查詢技術(shù)主要通過min-width和max-width屬性參數(shù)來設(shè)定屏幕邊界條件。案例中如果是符合手機(jī)等小屏設(shè)備尺寸，右側(cè)內(nèi)容不顯示。

1）在<head>標(biāo)簽中使用媒體查詢。為保證加載頁面時(shí)，就能夠根據(jù)實(shí)際物理設(shè)備情況進(jìn)行布局顯示，可以在<head>標(biāo)簽中使用媒體查詢。如下方代碼所示，在<head>標(biāo)簽中，name賦值“viewport”后，結(jié)合<link>標(biāo)簽使用media屬性來進(jìn)行媒體查詢，通過對(duì)不同設(shè)備尺寸判斷，為href賦不同CSS樣式文件。其中pc1.css、pad1.css和phone1.css三個(gè)文件是分別定義在電腦、平板和手機(jī)屏上顯示網(wǎng)頁時(shí)樣式文件，當(dāng)條件判斷符合查詢規(guī)則時(shí)，將按照相應(yīng)樣式文件顯示。

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width，initial-scale=1，user-scalable=no">

<title></title>

<link rel="stylesheet" href="css/pc1.css">

<link rel="stylesheet" type="text/css" media="only screen and （min-width：768px） and （max-width：992px）" href="css/pad1.css">

<link rel="stylesheet" type="text/css" media="only screen and （max-width：768px）" href="css/phone1.css">

</head>

2）在CSS樣式文件中使用媒體查詢。<head>標(biāo)簽中直接引用CSS文件，程序運(yùn)行過程中，每一次加載頁面都要進(jìn)行判斷與調(diào)用，勢(shì)必會(huì)對(duì)程序運(yùn)行效率帶來一定的影響。因此，可轉(zhuǎn)換成在*.css樣式文件中使用媒體查詢，通過@media聲明一個(gè)媒體查詢?cè)O(shè)備后，再定義樣式，來改善運(yùn)行效率。

首先通過@media來聲明一個(gè)媒體查詢?cè)O(shè)備，例如布局格式主要滿足平板等設(shè)備時(shí)，可設(shè)定設(shè)備屏幕寬度最小是768像素，最大是992像素，使用如下語句來進(jìn)行，來實(shí)現(xiàn)較好的布局顯示效果，從而獲得更好的客戶體驗(yàn)。

@media screen and （min-width：768px）

and （max-width：992px） {

選擇器 {

樣式聲明…

}

}

3.3 基于媒體查詢的響應(yīng)式網(wǎng)頁實(shí)現(xiàn)

結(jié)合屏幕邊界取值，設(shè)定查詢條件，按照移動(dòng)小屏幕尺寸最大不超過768 px、平板中小屏幕最大不超過992 px、電腦等大屏幕大于992 px進(jìn)行設(shè)定劃分，并進(jìn)行樣式設(shè)定。

移動(dòng)小屏幕，左側(cè)導(dǎo)航信息與中間內(nèi)容占屏100%顯示，中間圖片進(jìn)行比例調(diào)整，每行2張圖，分別占屏48%顯示，如下測(cè)試編碼，滿足移動(dòng)小屏幕布局效果。

@media screen and （max-width：768px）{

.left {

width：100%; }

.center {

width：100%;

margin： 10px 0 0;}

.center .img img {

width： 48%;

}

}

平板等中屏設(shè)備，左側(cè)導(dǎo)航信息占屏25%顯示，中間內(nèi)容占屏74%顯示，不顯示右側(cè)內(nèi)容，如下測(cè)試編碼，滿足平板等中屏布局效果。

@media screen and （max-width：992px）{

.left {

width：25%; }

.center {

width：74% }

.right {

display： none;

}

}

電腦等大屏幕顯示，按照網(wǎng)頁完整樣式呈現(xiàn)，如圖3所示，左側(cè)導(dǎo)航信息占屏20%，中間內(nèi)容占屏58%，右側(cè)內(nèi)容占屏20%。

4 結(jié)束語

響應(yīng)式網(wǎng)頁設(shè)計(jì)，不僅僅是一種技術(shù)手段，也是在跨平臺(tái)設(shè)備之間，協(xié)同實(shí)現(xiàn)統(tǒng)一效果思考的過程。在使用媒體查詢技術(shù)進(jìn)行響應(yīng)式網(wǎng)頁設(shè)計(jì)時(shí)，一般通過設(shè)置小屏、中屏、大屏3種不同尺寸的布局方案來實(shí)現(xiàn)，能夠提高響應(yīng)式網(wǎng)頁的開發(fā)效率，滿足瀏覽需求，對(duì)網(wǎng)頁跨m8A6Iftb2qKuSq+pxc4tSg==平臺(tái)應(yīng)用有重要意義。

參考文獻(xiàn)：

[1] 孫帥.響應(yīng)式網(wǎng)頁在跨平臺(tái)移動(dòng)終端設(shè)備上的設(shè)計(jì)與研究[J].信息與電腦（理論版），2023，35（15）：103-105，150.

[2] 莊麗君.Bootstrap響應(yīng)式Web設(shè)計(jì)應(yīng)用研究——以玩具商城網(wǎng)站設(shè)計(jì)為例[J].現(xiàn)代信息科技，2023，7（22）：96-99.

[3] 魯鑫超.響應(yīng)式技術(shù)在網(wǎng)頁設(shè)計(jì)中的應(yīng)用[D].天津：天津職業(yè)技術(shù)師范大學(xué)，2022.

[4] 王浩.HTML5+CSS3+Java Script Web前端開發(fā)案例教程（慕課版）[M].北京：北京人民郵電出版社，2020：242.

[5] 姚馨，黎明明，鄧麗萍.響應(yīng)式網(wǎng)頁設(shè)計(jì)中媒體查詢的應(yīng)用和實(shí)現(xiàn)[J].現(xiàn)代信息科技，2023，7（2）：18-21，25.

[6] 趙怡姍，范明鈺.基于HTML5與CSS3的網(wǎng)頁設(shè)計(jì)技術(shù)研究[J].成都信息工程大學(xué)學(xué)報(bào)，2021，36（6）：641-645.

[7] 梁敦毫.響應(yīng)式布局網(wǎng)頁的設(shè)計(jì)與實(shí)現(xiàn)[J].數(shù)字技術(shù)與應(yīng)用，2020，38（12）：150-153.

第一作者簡(jiǎn)介：李毅（1978-），女，碩士，副教授。研究方向?yàn)橛?jì)算機(jī)應(yīng)用、數(shù)字化資源建設(shè)、終身教育等。