響應式網頁設計中媒體查詢的應用和實現

姚馨 黎明明 鄧麗萍

摘? 要：隨著智能設備的普及和移動網絡的快速發展，越來越多的用戶喜歡使用移動設備查詢信息，但是傳統網頁在小型設備上顯示效果不佳。響應式網站根據不同規格的屏幕，設計出能夠合理顯示的網頁，較好地提升用戶瀏覽網頁的訪問體驗。文章介紹了使用媒體查詢技術設計響應式網頁的理論和方法，并以響應式旅游網頁制作為例，重點闡述媒體查詢技術的運用，為讀者提供參考。

關鍵詞：媒體查詢；響應式網頁；CSS3；HTML5

中圖分類號：TP311 文獻標識碼：A? 文章編號：2096-4706（2023）02-0018-05

Application and Implementation of Media Query in Responsive Web Design

YAO Xin， LI Mingming， DENG Liping

（Guangxi Vocational College of Water Resources and Electric Power， Nanning? 530001， China）

Abstract： With the popularity of smart devices and the rapid development of mobile network， more and more users like to use mobile devices to query information， but traditional Web pages do not display well on small devices. Responsive websites design Web pages to display reasonably according to different screen sizes， which can better enhance the user's experience of browsing Web pages. This paper introduces the theory and method of designing responsive Web pages by using media query technology， and takes the production of responsive travel Web pages as an example， focuses on the application of media query technology， to provide reference for readers.

Keywords： media query; responsive Web; CSS3; HTML5

0? 引? 言

2022年中國互聯網絡信息中心發布的中國互聯網絡發展狀況統計報告顯示，我國網民使用手機、臺式電腦、筆記本電腦和平板電腦上網的比例分別為99.7%、35.0%、33.0%和27.4%，手機成為上網最主要的設備，“移動優先”原則逐漸突出。如果期望網站可以在各種設備上都能擁有出色的用戶體驗，那么就需要在不同的平臺上提供不同的網站界面。為了解決移動設備屏幕大小不同的問題，使網站適應不同設備的屏幕大小，創建了響應式網站。響應式布局是2010年提出的網頁設計理念，就是一個網站能夠兼容多種類型終端，而不需要為每個終端設計一個特定的版本，這是為解決移動互聯網網頁瀏覽而誕生的。為了使網頁能根據終端屏幕的寬度，做出對應的調整，以使得不同的設備下網頁內容能以合適、美觀的方式展現，出現了響應式網頁制作的四個解決方案：相對尺寸單位、屏幕斷點、彈性布局、柵格系統。媒體查詢就是屏幕中斷點的具體實現技術，本文主要介紹媒體查詢的原理和使用方法。

1? 媒體查詢技術

CSS的媒體查詢技術是可以根據窗口的寬度、設備的分辨率以及設備方向等差異來改變頁面的顯示效果。

1.1? 媒體查詢的語法結構

Html4和CSS可以支持為不同的媒體類型（屏幕和打印設備）設置特定的CSS樣式。CSS3之后，擴展了媒體查詢功能。您不僅可以查詢媒體類型，還可以查詢與媒體相關的屬性。例如，可以使用不同的CSS代碼或CSS文件根據顯示寬度、設備方向等的差異更改頁面的外觀。

媒體查詢由媒體類型和條件表達式組成。其語法格式為：

媒體查詢語句是用“@media”來聲明的，然后通過運算符and|not|only將媒體類型或媒體特性結合成媒體查詢規則，當查詢規則為真時，根據樣式代碼將各個選擇器的樣式生效。

1.2? 媒體類型

媒體類型用于表示設備類別。CSS提供了一些關鍵字來表示不同類型的媒體，常用的有all和screen。all代表所有媒體設備，screen代表電腦顯示器、智能手機和平板電腦。然后有print是代表打印設備。

1.3? 媒體功能

除了特定類型之外，還可以使用一些屬性來描述特定的設備屬性，例如寬度、高度、分辨率等。max-width是媒體屬性中最常用的，這意味著，如果媒體類型小于或等于指定的寬度，則樣式將生效。min-width與max-width恰好相反，也就是說，當媒體類型大于或等于指定的寬度，樣式則生效。

@media （max-width： 1200px）{ /*當屏幕小于1200px時*/

/*樣式設置*/

}

@media （max-width： 980px）{ /*當屏幕小于980px時*/

/*樣式設置*/

}

@media （max-width： 768px）{ /*當屏幕小于768px時*/

/*樣式設置*/

}

CSS代碼是自上而下執行的，因此使用max-width分隔屏幕時，必須遵循從大屏幕到小屏幕的順序。如果使用min-width來區分屏幕，則寫入順序是從小屏幕到大屏幕。

1.4? 多種媒體特性的使用

媒體查詢的主要功能是實現響應，在一定條件下運行樣式，實現頁面響應的效果?？梢耘c邏輯運算符結合使用，不僅如此，還能聯合構造復雜的媒體查詢。

1.4.1? and運算符

and運算符類似于JavaScript中的邏輯與運算符。只有當所有的查詢條件都滿足時，才會返回true。它可以把多個媒體查詢規則合并成一個媒體查詢，甚至，還能把媒體類型與媒體功能結合到一條查詢規則中。

@media screen and （min-width：420px） and （max-width：970px） {

.box{ background-color： #E8DBB5; }

}

上面的代碼段表示，當媒體類型為screen且屏幕寬度在420 px和970 px之間時，類名為.box的盒子的背景色呈現為#E8DBB5。

1.4.2? not運算符

not運算符用于否定媒體查詢命令，很像JavaScript中的邏輯非運算符。

@media not print and （max-width：970px）{

.box{ width：500px;? margin：0 auto; }

}

上述代碼段表示打印設備并且設備寬度不超過970 px，類名為.box的盒子不使用樣式代碼。

1.4.3? only運算符

only運算符用于確定特定類型的媒體。

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

.box {? font-size： 24px; color：blue; }

}

上述代碼段表示，如果媒體類型為screen，且屏幕寬度不大于970 px，則類名為.box的盒子里面的文字顏色為藍色，字體大小為24 px。

1.5? 媒體查詢方法

1.5.1? 設置meta標簽

在HTML5中，您可以通過標簽來配置所顯示端口的屬性。使用媒體查詢時，必須設置標簽才能讓頁面在瀏覽器中用理想的視口顯示，把name屬性設置為viewport，就可以設置視口。

在上面的代碼中，width用于設置視窗視口的寬度，即網頁寬度。width=device-width意味著視窗視口的寬度與可見顯示器的寬度（設備寬度）相同；user-scalable用于設置用戶是否可以改變屏幕的大小，默認值為yes，但是一般是不建議讓用戶縮放屏幕的，所以該值設置為no；initial-scale用于設置初始縮放比例，默認值為1.0；maximum-scale用于設置最大縮放比例，默認值為1.0。

1.5.2? 加載IE兼容JS插件

IE8不支持HTML5或CSS3媒體查詢，但由于IE8在中國仍占有很大的市場份額，因此在創建網站時應特別考慮這些用戶的兼容性。必須加載兩個外部JS文件以確保代碼兼容性。

1.5.3? 設置瀏覽器的渲染方式為最高

將默認IE瀏覽器渲染模式設置為計算機上安裝的最高IE瀏覽器標準。

1.5.4? 編寫媒體查詢的CSS代碼

@media （max-width： 768px）{ /*當屏幕小于768px時*/

/*樣式設置*/

}

上述代碼段是指當屏幕寬度小于768 px時會響應樣式設置。

2? 實現響應式網頁設計案例

2.1? 開發方案

目前，市場上主要有兩種移動Web開發方案：一種是獨立創建移動終端頁面，另一種是提供與PC和移動終端兼容的響應式網站。

一般來說，移動終端頁面的創建不會改變原來的PC終端頁面，而是為移動終端開發一個特定版本，并在網站的域名中使用代表移動終端網站的二級域名“m”。這種網站的優點是，它可以充分考慮平臺的局限性和優勢，創造良好的用戶體驗設計，并且可以在移動設備上更快地加載網站。由于創建移動網站本身會生成多個URL，因此重定向移動網站需要一些時間。同時，有必要對搜索引擎進行處理，這些都將增加維護成本。此外，可能需要為不同的屏幕大小創建多個站點，這對開發人員來說是一個巨大的工作量。

在頁面實現過程中，作者選擇了第二種開發方案即創建響應頁面。響應頁面是指同一頁面可以在不同的屏幕大小下實現不同的布局，從而使頁面可以與不同的終端兼容。響應式網頁發展主要是解決移動互聯網瀏覽問題，通過響應性設計，該網站可以在手機和平板電腦上獲得更好的瀏覽和閱讀體驗。在開發移動終端頁面時，編輯瀏覽器窗口時，通過評估瀏覽器窗口的寬度來改變樣式，并根據瀏覽器窗口的大小重新顯示頁面結構，以適應不同的移動終端設備。

2.2? 設計思路

響應性頁面設計和實現是要求相同的內容在不同寬度的布局設計。有兩種方式：PC優先（從計算機端向下設計）和mobile優先（從移動端向上設計）。

mobile first responsive布局采用漸進式改進的原則。創建響應式網站時，首先創建移動版本，然后隨著平板電腦版本和桌面版本的引入，頁面將逐漸變得更加復雜，這是一個漸進的過程。功能是使用min-width來匹配頁面的寬度。當從上到下寫入時，首先考慮使用移動設備的場景。默認情況下，它按屏幕最窄的情況輸出，然后考慮逐步擴展設備屏幕。

中斷點是網站某些部分發生變化的關鍵點。本案例主要涉及在不同視圖寬度下更改網站的布局。例如，如果顯示寬度小于或等于768 px，mission-left模塊是被隱藏起來的；如果顯示寬度介于768 px至1 200 px之間，網站依然采用單列布局，這時mission-left模塊被加載，在mission-right模塊上方；當顯示寬度繼續增大，大于1 200 px時，這時網頁布局由原來的單列變為兩列布局，mission-left模塊和mission-right模塊并列在頁面中。由于網站布局在顯示寬度為768 px和1 200 px時發生了變化，因此這兩個點被稱為中斷點。為了更好地了解不同屏幕大小下網頁的布局效果，可以通過繪制中斷點圖來協助進行布局設計。本案例的中斷點圖如圖1所示。

2.3? 編碼實現

創建新的HTML代碼并在頁面上輸入以下代碼：

在HTML文件中，給最外層的父div命名為“box”，里面從上到下包含了網頁的四個子div，分別是頁眉“header”“banner”、主體“container”和頁腳“footer”?！癿ission-left”模塊在“container”里面。

2.3.1? 在移動設備上顯示

當網站由于空間小而顯示在手機等小型設備上時，需要對顯示內容進行優先排序，突出顯示主要功能模塊，并確保用戶不會錯過關鍵信息。一些不是很必要的模塊，可以先不加載。在本案例中，顯示尺寸在768 px以下時，“mission-left”模塊不加載。

關鍵CSS代碼：

.mission-div { border：#000000 1px solid; width： 85%;

height： 360px; margin： 0px auto 15px; }

.mission-left { background-color： mediumturquoise;

display： none; }

.mission-right { background-color： darkgoldenrod;}

為了更好地觀察頁面的制作效果，可以給盒子元素設置寬、高、背景顏色或者邊框等屬性。為了避免各元素緊挨排列，可使用外邊距margin屬性來調節。此外，還可以用百分比布局代替固定布局，那么頁面的寬度是會隨著視口的大小而改變，這樣能更好地兼容市面上的多種設備。上述代碼表示“mission-left”和“mission-right”模塊寬度占父元素的85%，并在父元素內水平居中。其中給“mission-left”設置了display： none;屬性，這時該元素將不顯示在頁面中。

2.3.2? 平板顯示器

中屏幕設備（平板電腦或大尺寸手機橫屏）有相對自由的空間，可以顯示所有內容模塊。本案例中，顯示尺寸在768 px到1 200 px之間，所有模塊都會被顯示在頁面中，這時原來小屏幕不顯示的“mission-left”模塊可以使用display： block;語句將其顯示出來，其他樣式都繼承原來小屏幕的樣式設置，和“mission-right”模塊并列呈現在其父元素“mission-div”中。

關鍵CSS代碼：

@media （min-width：768px） {

.mission-left { display： block; }

}

2.3.3? 在桌面設備顯示

由于大屏幕設備（筆記本電腦或寬屏顯示器）的顯示面積較大，通常采用兩列或三列布局。兩列或三列布局的關鍵點是為元素的寬度屬性設置適當的百分比，并使用浮動屬性。本案例中，顯示尺寸大于1 200 px，使用兩列布局，所有模塊都被顯示在頁面中。

關鍵CSS代碼：

@media （min-width： 1200px） {

.mission-div { width：44%; float：left; margin：0 30px;}

}

2.4? 顯示網頁效果

通過編碼，實現了一個響應式網站“框架”的構建。如圖2所示。

此外，需要根據框架添加特定內容，例如網站徽標、導航菜單、輪播圖或焦點圖以及各種功能門戶。在“移動版”的顯示效果中，除了根據需要隱藏一些功能模塊外，還可以創建漢堡菜單，以提高對站點前端寶貴屏幕空間的使用。此外，對于編輯網站而言，媒體查詢最重要的事情是仔細編碼，并確保網站有細微的變化，以提升用戶體驗。如圖3所示為響應式網頁在不同視口的布局效果。

3? 結? 論

當前，響應式網站設計已經成為網站發展的一種非常重要的方式，然而，由于自身的局限性，響應式網站也在不斷創新和發展。從上述案例可以看出，對于網站前端開發人員來說，在充分掌握基礎技術的情況下，使用媒體查詢技術可以更快地實現響應式網頁的設計，通過增加適量的中斷點，為不同終端的用戶提供更方便的界面和更好的用戶體驗。

參考文獻：

[1] 陳益全，吳多智.斷點在響應式網頁設計中的應用研究 [J].微型電腦應用，2016，32（5）：41-43.

[2] 黑馬程序員.響應式Web開發項目教程（HTML5+CSS3+

Bootstrap） [M].北京：人民郵電出版社，2017.

[3] 王愉，潘明明.響應式網頁設計初探 [J].北京印刷學院學報，2014，22（3）：13-15.

[4] 黃龍泉.媒體查詢在響應式網站中的應用 [J].電腦編程技巧與維護，2017（15）：77-79.

[5] 吳多智，陳益全.響應式網頁設計案例實現與分析 [J].安徽電子信息職業技術學院學報，2016，15（2）：14-17+23.

作者簡介：姚馨（1983.09—），女，漢族，廣西來賓人，講師，碩士研究生，研究方向：網頁制作。

收稿日期：2022-07-21

基金項目：廣西壯族自治區教育廳自然科學類項目資金（2021KY1100）