基于媒體查詢技術(shù)的響應(yīng)式網(wǎng)頁實踐研究

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

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

中圖分類號：TP393 文獻(xiàn)標(biāo)志碼：A 文章編號：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

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

1 適配問題

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

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

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

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

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

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

3.1 Viewport（視口）

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

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

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

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

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

3）initial-scale為初始時的縮放倍率。

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

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

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

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

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

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

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

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

css-code

}

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

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

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

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

1）在<head>標(biāo)簽中使用媒體查詢。為保證加載頁面時，就能夠根據(jù)實際物理設(shè)備情況進行布局顯示，可以在<head>標(biāo)簽中使用媒體查詢。如下方代碼所示，在<head>標(biāo)簽中，name賦值“viewport”后，結(jié)合<link>標(biāo)簽使用media屬性來進行媒體查詢，通過對不同設(shè)備尺寸判斷，為href賦不同CSS樣式文件。其中pc1.css、pad1.css和phone1.css三個文件是分別定義在電腦、平板和手機屏上顯示網(wǎng)頁時樣式文件，當(dāng)條件判斷符合查詢規(guī)則時，將按照相應(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文件，程序運行過程中，每一次加載頁面都要進行判斷與調(diào)用，勢必會對程序運行效率帶來一定的影響。因此，可轉(zhuǎn)換成在*.css樣式文件中使用媒體查詢，通過@media聲明一個媒體查詢設(shè)備后，再定義樣式，來改善運行效率。

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

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

and （max-width：992px） {

選擇器 {

樣式聲明…

}

}

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

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

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

@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)容，如下測試編碼，滿足平板等中屏布局效果。

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

參考文獻(xiàn)：

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

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

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

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

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

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

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

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