響應(yīng)式網(wǎng)頁設(shè)計中媒體查詢的應(yīng)用和實現(xiàn)

姚馨 黎明明 鄧麗萍

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

關(guān)鍵詞：媒體查詢；響應(yīng)式網(wǎng)頁；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年中國互聯(lián)網(wǎng)絡(luò)信息中心發(fā)布的中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告顯示，我國網(wǎng)民使用手機、臺式電腦、筆記本電腦和平板電腦上網(wǎng)的比例分別為99.7%、35.0%、33.0%和27.4%，手機成為上網(wǎng)最主要的設(shè)備，“移動優(yōu)先”原則逐漸突出。如果期望網(wǎng)站可以在各種設(shè)備上都能擁有出色的用戶體驗，那么就需要在不同的平臺上提供不同的網(wǎng)站界面。為了解決移動設(shè)備屏幕大小不同的問題，使網(wǎng)站適應(yīng)不同設(shè)備的屏幕大小，創(chuàng)建了響應(yīng)式網(wǎng)站。響應(yīng)式布局是2010年提出的網(wǎng)頁設(shè)計理念，就是一個網(wǎng)站能夠兼容多種類型終端，而不需要為每個終端設(shè)計一個特定的版本，這是為解決移動互聯(lián)網(wǎng)網(wǎng)頁瀏覽而誕生的。為了使網(wǎng)頁能根據(jù)終端屏幕的寬度，做出對應(yīng)的調(diào)整，以使得不同的設(shè)備下網(wǎng)頁內(nèi)容能以合適、美觀的方式展現(xiàn)，出現(xiàn)了響應(yīng)式網(wǎng)頁制作的四個解決方案：相對尺寸單位、屏幕斷點、彈性布局、柵格系統(tǒng)。媒體查詢就是屏幕中斷點的具體實現(xiàn)技術(shù)，本文主要介紹媒體查詢的原理和使用方法。

1? 媒體查詢技術(shù)

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

1.1? 媒體查詢的語法結(jié)構(gòu)

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

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

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

1.2? 媒體類型

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

1.3? 媒體功能

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

@media （max-width： 1200px）{ /*當(dāng)屏幕小于1200px時*/

/*樣式設(shè)置*/

}

@media （max-width： 980px）{ /*當(dāng)屏幕小于980px時*/

/*樣式設(shè)置*/

}

@media （max-width： 768px）{ /*當(dāng)屏幕小于768px時*/

/*樣式設(shè)置*/

}

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

1.4? 多種媒體特性的使用

媒體查詢的主要功能是實現(xiàn)響應(yīng)，在一定條件下運行樣式，實現(xiàn)頁面響應(yīng)的效果?？梢耘c邏輯運算符結(jié)合使用，不僅如此，還能聯(lián)合構(gòu)造復(fù)雜的媒體查詢。

1.4.1? and運算符

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

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

.box{ background-color： #E8DBB5; }

}

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

1.4.2? not運算符

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

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

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

}

上述代碼段表示打印設(shè)備并且設(shè)備寬度不超過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? 設(shè)置meta標簽

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

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

1.5.2? 加載IE兼容JS插件

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

1.5.3? 設(shè)置瀏覽器的渲染方式為最高

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

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

@media （max-width： 768px）{ /*當(dāng)屏幕小于768px時*/

/*樣式設(shè)置*/

}

上述代碼段是指當(dāng)屏幕寬度小于768 px時會響應(yīng)樣式設(shè)置。

2? 實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計案例

2.1? 開發(fā)方案

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

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

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

2.2? 設(shè)計思路

響應(yīng)性頁面設(shè)計和實現(xiàn)是要求相同的內(nèi)容在不同寬度的布局設(shè)計。有兩種方式：PC優(yōu)先（從計算機端向下設(shè)計）和mobile優(yōu)先（從移動端向上設(shè)計）。

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

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

2.3? 編碼實現(xiàn)

創(chuàng)建新的HTML代碼并在頁面上輸入以下代碼：

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

2.3.1? 在移動設(shè)備上顯示

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

關(guān)鍵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;}

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

2.3.2? 平板顯示器

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

關(guān)鍵CSS代碼：

@media （min-width：768px） {

.mission-left { display： block; }

}

2.3.3? 在桌面設(shè)備顯示

由于大屏幕設(shè)備（筆記本電腦或?qū)捚溜@示器）的顯示面積較大，通常采用兩列或三列布局。兩列或三列布局的關(guān)鍵點是為元素的寬度屬性設(shè)置適當(dāng)?shù)陌俜直?，并使用浮動屬性。本案例中，顯示尺寸大于1 200 px，使用兩列布局，所有模塊都被顯示在頁面中。

關(guān)鍵CSS代碼：

@media （min-width： 1200px） {

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

}

2.4? 顯示網(wǎng)頁效果

通過編碼，實現(xiàn)了一個響應(yīng)式網(wǎng)站“框架”的構(gòu)建。如圖2所示。

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

3? 結(jié)? 論

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

參考文獻：

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

[2] 黑馬程序員.響應(yīng)式Web開發(fā)項目教程（HTML5+CSS3+

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

[3] 王愉，潘明明.響應(yīng)式網(wǎng)頁設(shè)計初探 [J].北京印刷學(xué)院學(xué)報，2014，22（3）：13-15.

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

[5] 吳多智，陳益全.響應(yīng)式網(wǎng)頁設(shè)計案例實現(xiàn)與分析 [J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報，2016，15（2）：14-17+23.

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

收稿日期：2022-07-21

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