基于媒體查詢技術的響應式網頁實踐研究
2024-08-08 00:00:00李毅
科技創新與應用 2024年23期
摘 要：隨著移動互聯網的普及，移動互聯終端應用不斷豐富，但傳統網頁在不同終端上顯示存在效果不佳問題。結合不同設備尺寸，以媒體查詢技術為基礎，進行響應式網頁設計，介紹基于媒體查詢的響應式網頁設計原理、設計思想與相關技術，并結合實踐案例分析響應式網頁在移動小屏幕、中小屏幕以及大屏幕上顯示效果的設計步驟與技術要點，為響應式網頁開發提供技術參考。
關鍵詞：媒體查詢；響應式網頁；CSS；網頁實踐；網頁設計
中圖分類號：TP393 文獻標志碼：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
隨著移動互聯網的普及，移動互聯終端應用不斷豐富，移動智能設備也逐漸走進人們的日常生活，被越來越廣泛地應用，并成為訪問互聯網的主流終端設備。由于移動終端的多樣化，傳統網頁設計方式會使得用戶在訪問網頁過程中，出現超出屏幕顯示范圍、界面混亂、文字或圖片堆疊顯示和橫屏與豎屏不能及時轉換等現象，從而造成不友好的用戶訪問體驗。這時，如果采用響應式網頁設計，可以很好地解決以上問題。
1 適配問題
在網頁設計過程中，針對不同的設備以及瀏覽器版本，網頁顯示布局會有變化。移動瀏覽器廠商會根據不同設備的屏幕進行相應的適配設計，比如6.5寸的4K手機和6.5寸2K的手機，可能會設置為一樣寬度的獨立像素，使得顯示的內容為理想寬度。網頁CSS樣式代碼中的1 px，不能夠直接采納屏幕物理分辨率的1 px，需要考慮操作系統或者瀏覽器的實際屏幕分辨率，也就是物理像素，才能在不同設備打開時，都可以以最理想的狀態呈現出來[1]。Window對象里面有一個devicePixelRatio屬性，代表設備物理像素和設備獨立像素比，即“devicePixelRatio=物理像素/獨立像素”。CSS里的px可以看做獨立像素，而devicePixelRatio一般由瀏覽器所決定。所以，想要很好地解決響應匹配的問題，需要進行適配，以確保一套網站在設計布局時可以結合物理像素不同展現不同結構，保證內容呈現清晰、完整，既適用于PC端也適用于移動端。響應式網頁通過技術手段，很好地解決了適配問題。
2 響應式網頁
響應式網頁設計是專為改進移動互聯網瀏覽體驗而提出的概念。它是一種頁面布局的設計方式，其理念是集中創建頁面的結構，智能地根據用戶行為以及使用的設備環境進行相對應的布局，即一個網頁可以根據瀏覽設備的不同，例如，手機、pad和電腦端以及不同硬件特性而呈現出不同的布局方式，無需編寫多個不同的版本[2]。使得在不同的設備上，同一個網頁都有良好的用戶瀏覽體驗。
響應式網頁主要實現技術手段有媒體查詢、彈性圖片和流式布局，并結合Bootstrap框架來輔助實現響應式網頁[3]。其中，媒體查詢（Media Query）是實現響應式網頁的核心技術，也是CSS3模塊中的一部分。
3 基于媒體查詢的響應式網頁設計
實現響應式網頁設計首先需要進行的是媒體查詢，結合查詢到的不同設備屏幕尺寸，對頁面進行更適配的布局樣式顯示。通常通過在網頁頭部head中添加meta標簽來聲明視口，解決移動設備不同尺寸問題[4]。
3.1 Viewport（視口）
Viewport（視口）概念，最早由蘋果公司在iOS系統中提出，后來Android系統也引入了該概念。這是一個移動設備瀏覽器中專有的概念，PC瀏覽器會忽略此概念。視口是手機中用于顯示網頁內容的虛擬窗口，所以也稱其為虛擬視口。在較小的物理屏幕下，可以瀏覽較大的網頁內容。在移動端，有３個視口狀態，如圖1所示，分別是布局視口、視覺視口和理想視口。布局視口與網頁寬度一致；視覺視口是用戶瀏覽網頁區域，如果超出范圍，可以通過拖拽滾動條來實現查看；理想視口就是在解決適配問題后，將布局視口與視覺視口相適應的狀態。
如圖2所示，在設定分辨率498×768后，使用相同樣式表進行測試，左側是<meta>標簽中沒有引入viewport時，直接調用CSS樣式文件，網頁在瀏覽器上顯示測試中的狀態；右側是引入了viewport，并設置了相關屬性，添加<meta name=“viewport”content=“width=device-width，initial-scale=1，user-scalable=no”>后，網頁顯示的測試狀態。可以看到，已經對屏幕尺寸做出基本判斷，并呈現一定顯示適配效果。
其中，Content可以設置屬性包括以下內容。
1）width指視口的寬度，可以取值為數值，或device-width（設備寬度）。
2）height為視口的高度，一般不用指定。
3）initial-scale為初始時的縮放倍率。
4）minimum-scale 為允許的最小縮放倍率。
5）maximum-scale為允許的最大縮放倍率。
6）user-scalable 為是否允許用戶手動縮放，可取值1/0/yes/no。
3.2 媒體查詢技術原理與應用
3.2.1 媒體查詢技術原理
Media Query（媒體查詢）技術，會根據當前瀏覽設備類型以及物理特性方面的不同，檢測到viewport（視口）的寬度和高度，設備的實際寬度、旋轉方向等屬性，設計適合不同媒體屬性的、各種相適配的CSS代碼[5]。
其基本語法結構是：
@media mediatype and |not |only（media feature）{
css-code
}
用“@media”開頭進行聲明，設置媒體類型（mediatype）與媒體功能（media feature）。通過運算符and|not|only，設置查詢規則，當取值為真時，根據設定樣式代碼，使得各選擇器樣式生效。不同類型終端在加載網頁或者重置瀏覽器時，網頁會根據瀏覽器寬度或者媒體類型，執行不同的CSS樣式，顯示出更加匹配的頁面布局效果[6]。
3.2.2 不同設備屏幕尺寸設定
為后續設計響應式網頁時，可以更準確地應用媒體查詢，需提前明確設定常用不同設備屏幕寬度尺寸區間。
1）手機等小屏設備，屏幕尺寸小于768 px。
2）平板等中屏設備，屏幕尺寸在768 px到992 px之間。
3）桌面等設備，屏幕尺寸大于992 px。
4）大屏幕智能終端，屏幕尺寸大于1 200 px。
3.2.3 媒體查詢技術應用
如果要保證可以適應不同終端顯示效果，需要分別引入網頁在電腦端、pad端和手機端上顯示時的格式樣式，結合媒體查詢結果來顯示相應網頁布局效果。類型可設定為screen（包括電腦屏幕、平板電腦、智能手機等）、媒體特性和CSS樣式。媒體查詢技術主要通過min-width和max-width屬性參數來設定屏幕邊界條件。案例中如果是符合手機等小屏設備尺寸，右側內容不顯示。
1）在<head>標簽中使用媒體查詢。為保證加載頁面時，就能夠根據實際物理設備情況進行布局顯示，可以在<head>標簽中使用媒體查詢。如下方代碼所示，在<head>標簽中，name賦值“viewport”后，結合<link>標簽使用media屬性來進行媒體查詢，通過對不同設備尺寸判斷，為href賦不同CSS樣式文件。其中pc1.css、pad1.css和phone1.css三個文件是分別定義在電腦、平板和手機屏上顯示網頁時樣式文件，當條件判斷符合查詢規則時，將按照相應樣式文件顯示。
<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>標簽中直接引用CSS文件，程序運行過程中，每一次加載頁面都要進行判斷與調用，勢必會對程序運行效率帶來一定的影響。因此，可轉換成在*.css樣式文件中使用媒體查詢，通過@media聲明一個媒體查詢設備后，再定義樣式，來改善運行效率。
首先通過@media來聲明一個媒體查詢設備，例如布局格式主要滿足平板等設備時，可設定設備屏幕寬度最小是768像素，最大是992像素，使用如下語句來進行，來實現較好的布局顯示效果，從而獲得更好的客戶體驗。
@media screen and （min-width：768px）
and （max-width：992px） {
選擇器 {
樣式聲明…
}
}
3.3 基于媒體查詢的響應式網頁實現
結合屏幕邊界取值，設定查詢條件，按照移動小屏幕尺寸最大不超過768 px、平板中小屏幕最大不超過992 px、電腦等大屏幕大于992 px進行設定劃分，并進行樣式設定。
移動小屏幕，左側導航信息與中間內容占屏100%顯示，中間圖片進行比例調整，每行2張圖，分別占屏48%顯示，如下測試編碼，滿足移動小屏幕布局效果。
@media screen and （max-width：768px）{
.left {
width：100%; }
.center {
width：100%;
margin： 10px 0 0;}
.center .img img {
width： 48%;
}
}
平板等中屏設備，左側導航信息占屏25%顯示，中間內容占屏74%顯示，不顯示右側內容，如下測試編碼，滿足平板等中屏布局效果。
@media screen and （max-width：992px）{
.left {
width：25%; }
.center {
width：74% }
.right {
display： none;
}
}
電腦等大屏幕顯示，按照網頁完整樣式呈現，如圖3所示，左側導航信息占屏20%，中間內容占屏58%，右側內容占屏20%。
4 結束語
響應式網頁設計，不僅僅是一種技術手段，也是在跨平臺設備之間，協同實現統一效果思考的過程。在使用媒體查詢技術進行響應式網頁設計時，一般通過設置小屏、中屏、大屏3種不同尺寸的布局方案來實現，能夠提高響應式網頁的開發效率，滿足瀏覽需求，對網頁跨m8A6Iftb2qKuSq+pxc4tSg==平臺應用有重要意義。
參考文獻：
[1] 孫帥.響應式網頁在跨平臺移動終端設備上的設計與研究[J].信息與電腦（理論版），2023，35（15）：103-105，150.
[2] 莊麗君.Bootstrap響應式Web設計應用研究——以玩具商城網站設計為例[J].現代信息科技，2023，7（22）：96-99.
[3] 魯鑫超.響應式技術在網頁設計中的應用[D].天津：天津職業技術師范大學，2022.
[4] 王浩.HTML5+CSS3+Java Script Web前端開發案例教程（慕課版）[M].北京：北京人民郵電出版社，2020：242.
[5] 姚馨，黎明明，鄧麗萍.響應式網頁設計中媒體查詢的應用和實現[J].現代信息科技，2023，7（2）：18-21，25.
[6] 趙怡姍，范明鈺.基于HTML5與CSS3的網頁設計技術研究[J].成都信息工程大學學報，2021，36（6）：641-645.
[7] 梁敦毫.響應式布局網頁的設計與實現[J].數字技術與應用，2020，38（12）：150-153.
第一作者簡介：李毅（1978-），女，碩士，副教授。研究方向為計算機應用、數字化資源建設、終身教育等。
