淺談CSS3 Media Query的使用方法

陸郁

摘? 要：網(wǎng)頁(yè)設(shè)計(jì)人員都希望開(kāi)發(fā)的網(wǎng)頁(yè)可以適用于各種終端設(shè)備上，使瀏覽者可以完整、友好地瀏覽網(wǎng)頁(yè)。響應(yīng)式布局的提出恰恰可以滿足這一需求。而響應(yīng)式布局的關(guān)鍵就是要通過(guò)Media Query媒介查詢(xún)對(duì)終端設(shè)備的顯示尺寸進(jìn)行檢測(cè)。該文分別對(duì)Media Query媒介查詢(xún)、Media Query使用及其優(yōu)、缺點(diǎn)進(jìn)行闡述，希望對(duì)網(wǎng)頁(yè)設(shè)計(jì)人員在實(shí)現(xiàn)響應(yīng)式布局時(shí)有所幫助。

關(guān)鍵詞：響應(yīng)式布局? Media Query? CSS

中圖分類(lèi)號(hào)：TP393 ? ?文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-3791（2019）09（c）-0022-02

隨著信息技術(shù)的不斷發(fā)展，網(wǎng)頁(yè)訪問(wèn)的終端設(shè)備也在不斷增加。如何為不同終端的瀏覽者提供更為完整、友好的界面成為網(wǎng)站設(shè)計(jì)人員共同思考的問(wèn)題。無(wú)論是在手機(jī)、平板電腦，還是在超大屏移動(dòng)設(shè)備上，訪問(wèn)者都希望能夠看到適合于自己屏幕的網(wǎng)頁(yè)。響應(yīng)式布局理念的提出，為網(wǎng)頁(yè)設(shè)計(jì)人員打開(kāi)了一扇大門(mén)。網(wǎng)頁(yè)設(shè)計(jì)人員可以通過(guò)對(duì)訪問(wèn)終端的檢測(cè)信息反饋，從而獲取屏幕尺寸，使網(wǎng)頁(yè)按照顯示比例給予呈現(xiàn)。CSS3中的Media Query媒介查詢(xún)就可以簡(jiǎn)單、快捷地實(shí)現(xiàn)這一功能，從而為網(wǎng)頁(yè)設(shè)計(jì)人員實(shí)現(xiàn)響應(yīng)式布局提供了有力的保障。

1? CSS3中的Media Query（媒介查詢(xún)）

無(wú)論是從iPhone手機(jī)的320px還是大屏顯示器2560px，網(wǎng)頁(yè)總會(huì)以一種自適應(yīng)的方式完美呈現(xiàn)給瀏覽者。這就需要在網(wǎng)頁(yè)顯示之前對(duì)訪問(wèn)終端設(shè)備的屏幕尺寸的檢測(cè)，并根據(jù)不同尺寸將網(wǎng)頁(yè)內(nèi)容按CSS設(shè)置分別給予顯示。Media Query可以對(duì)輸出設(shè)備的屏幕可見(jiàn)高度、最大高度、最小高度;屏幕可見(jiàn)寬度、最大寬度、最小寬度;頁(yè)面可見(jiàn)區(qū)域高度、最大高度、最小高度;頁(yè)面可見(jiàn)區(qū)域?qū)挾取⒆畲髮挾?、最小寬度等媒介特征給予檢測(cè)。Media Query對(duì)設(shè)備終端的顯示尺寸可以根據(jù)每個(gè)網(wǎng)頁(yè)設(shè)計(jì)人員不同的設(shè)計(jì)需求來(lái)進(jìn)行反饋。其語(yǔ)法是：

@media 媒體終端 and|not|only （媒介特征）

{顯示設(shè)置內(nèi)容}

其中，主流瀏覽器都支持"screen"（計(jì)算機(jī)屏幕）、"print"（打印預(yù)覽模式 / 打印頁(yè)）以及 "all" （適合所有設(shè)備）這3項(xiàng)設(shè)置。

2? Media Query的使用

2.1 在中使用

標(biāo)記是HTML語(yǔ)言中用于鏈接樣式表的標(biāo)記語(yǔ)言，它放于標(biāo)記部分。它有rel、href、media、sizes等屬性，其中media屬性就是設(shè)置被鏈接文檔將顯示在外部訪問(wèn)終端上。例如：。

2.2 在CSS中使用

CSS可以為超文本編輯語(yǔ)言（HTML）或可擴(kuò)展標(biāo)記語(yǔ)言（XML）提供文件樣式的設(shè)定，例如，對(duì)文字的字體、字號(hào)、顏色等的設(shè)定。CSS對(duì)這些標(biāo)記進(jìn)行設(shè)置時(shí)，要求設(shè)置內(nèi)容需用花括號(hào)包圍起來(lái)，所以在CSS中使用media query，需要檢測(cè)滿足條件時(shí)，CSS設(shè)定才會(huì)有效。例如：

@media screen and（max-width：320px）

{.row{width：100%;}}

2.3 在Improt中使用

如果一組樣式設(shè)定需要反復(fù)使用，那么我們可以將這組CSS設(shè)定放在一個(gè)文件中，如果需要，可以隨時(shí)將其導(dǎo)入。@import則可以實(shí)現(xiàn)這一功能。結(jié)合于media query檢測(cè)反饋信息，當(dāng)條件被滿足時(shí)，使用@import將外部CSS文件導(dǎo)入。此時(shí)，寫(xiě)在外部CSS樣式文件中的樣式設(shè)定才會(huì)有效。例如：

@import url（"bujuyangshi1.css"） screen and（max-width：320px）;

3? 響應(yīng)式布局的優(yōu)點(diǎn)和缺點(diǎn)

3.1 響應(yīng)式布局的優(yōu)點(diǎn)

網(wǎng)頁(yè)的顯示效果可以根據(jù)不同的訪問(wèn)終端進(jìn)行合理的響應(yīng)和調(diào)整。無(wú)論瀏覽者是通過(guò)筆記本還是手機(jī)終端，頁(yè)面都可以通過(guò)Media Query媒介查詢(xún)之后自動(dòng)切換分辨率，按照顯示比例對(duì)圖片尺寸進(jìn)行調(diào)整，對(duì)顯示文字字號(hào)及行容量進(jìn)行掌控，甚至對(duì)相關(guān)腳本都可以滿足不同訪問(wèn)終端的使用需求。這種網(wǎng)頁(yè)布局方式，可以兼容現(xiàn)在及未來(lái)不同機(jī)型，具有前趨性。并且，響應(yīng)式布局是針對(duì)頁(yè)面的設(shè)計(jì)，對(duì)于其開(kāi)發(fā)、運(yùn)營(yíng)和后期維護(hù)相對(duì)多個(gè)版本成本會(huì)降低，也減少了網(wǎng)站維護(hù)人員的工作量。

3.2 響應(yīng)式布局的缺點(diǎn)

由于響應(yīng)式布局需要滿足不同顯示比例的設(shè)備輸出，所以它需要設(shè)定不同的CSS及腳本代碼。這就使網(wǎng)頁(yè)在顯示加載時(shí)的速度會(huì)受到一定的影響，特別是一些大型的門(mén)戶型網(wǎng)站或圖片、視頻較多的電子商務(wù)型站，會(huì)使其運(yùn)行速度降低。而且，終端屏幕尺寸的使用比率是不同的，這就會(huì)使一些CSS設(shè)定使用率較低，既造成了加載負(fù)荷又使代碼造成冗余。

4? 結(jié)語(yǔ)

總之，響應(yīng)式網(wǎng)頁(yè)布局是使用Media Query媒介查詢(xún)來(lái)設(shè)置CSS樣式，以適應(yīng)不同訪問(wèn)終端屏幕的使用需求，使瀏覽者可以在不同的訪問(wèn)設(shè)備下進(jìn)行網(wǎng)頁(yè)瀏覽。希望網(wǎng)頁(yè)設(shè)計(jì)人員可以解決它的CSS多重設(shè)置問(wèn)題，從而使其更適合現(xiàn)在網(wǎng)頁(yè)瀏覽需求的布局方式。

參考文獻(xiàn)

[1] 彭雪萍.試析響應(yīng)式網(wǎng)頁(yè)的設(shè)計(jì)與開(kāi)發(fā)[J].電腦編程技巧與維護(hù)，2018（10）：8-10.

[2] 葉潮流，馬林山.基于HTML5+CSS3+jQuery的響應(yīng)式布局網(wǎng)頁(yè)設(shè)計(jì)[J].梧州學(xué)院學(xué)報(bào)，2018，28（3）：22-35.

[3] 徐健.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)案例實(shí)現(xiàn)與分析[J].信息與電腦：理論版，2018（6）：13-15.

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

[5] 洪濤.平面設(shè)計(jì)專(zhuān)業(yè)網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)改革研究[J].美術(shù)教育研究，2017（18）：90-91.

[6] 陳潔.案例教學(xué)法在網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中的應(yīng)用研究[J].佳木斯職業(yè)學(xué)院學(xué)報(bào)，2017（7）：429-430.

[7] 袁琳.案例教學(xué)在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)課中的應(yīng)用[J].新西部：理論版，2016（20）：109，133.

[8] 龍安源.高職院校網(wǎng)頁(yè)設(shè)計(jì)人才培養(yǎng)與教學(xué)模式的創(chuàng)新與實(shí)踐[J].科技經(jīng)濟(jì)導(dǎo)刊，2016（17）：144.