淺談CSS3 Media Query的使用方法

陸郁

摘? 要：網頁設計人員都希望開發的網頁可以適用于各種終端設備上，使瀏覽者可以完整、友好地瀏覽網頁。響應式布局的提出恰恰可以滿足這一需求。而響應式布局的關鍵就是要通過Media Query媒介查詢對終端設備的顯示尺寸進行檢測。該文分別對Media Query媒介查詢、Media Query使用及其優、缺點進行闡述，希望對網頁設計人員在實現響應式布局時有所幫助。

關鍵詞：響應式布局? Media Query? CSS

中圖分類號：TP393 ? ?文獻標識碼：A 文章編號：1672-3791（2019）09（c）-0022-02

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

1? CSS3中的Media Query（媒介查詢）

無論是從iPhone手機的320px還是大屏顯示器2560px，網頁總會以一種自適應的方式完美呈現給瀏覽者。這就需要在網頁顯示之前對訪問終端設備的屏幕尺寸的檢測，并根據不同尺寸將網頁內容按CSS設置分別給予顯示。Media Query可以對輸出設備的屏幕可見高度、最大高度、最小高度;屏幕可見寬度、最大寬度、最小寬度;頁面可見區域高度、最大高度、最小高度;頁面可見區域寬度、最大寬度、最小寬度等媒介特征給予檢測。Media Query對設備終端的顯示尺寸可以根據每個網頁設計人員不同的設計需求來進行反饋。其語法是：

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

{顯示設置內容}

其中，主流瀏覽器都支持"screen"（計算機屏幕）、"print"（打印預覽模式 / 打印頁）以及 "all" （適合所有設備）這3項設置。

2? Media Query的使用

2.1 在中使用

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

2.2 在CSS中使用

CSS可以為超文本編輯語言（HTML）或可擴展標記語言（XML）提供文件樣式的設定，例如，對文字的字體、字號、顏色等的設定。CSS對這些標記進行設置時，要求設置內容需用花括號包圍起來，所以在CSS中使用media query，需要檢測滿足條件時，CSS設定才會有效。例如：

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

{.row{width：100%;}}

2.3 在Improt中使用

如果一組樣式設定需要反復使用，那么我們可以將這組CSS設定放在一個文件中，如果需要，可以隨時將其導入。@import則可以實現這一功能。結合于media query檢測反饋信息，當條件被滿足時，使用@import將外部CSS文件導入。此時，寫在外部CSS樣式文件中的樣式設定才會有效。例如：

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

3? 響應式布局的優點和缺點

3.1 響應式布局的優點

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

3.2 響應式布局的缺點

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

4? 結語

總之，響應式網頁布局是使用Media Query媒介查詢來設置CSS樣式，以適應不同訪問終端屏幕的使用需求，使瀏覽者可以在不同的訪問設備下進行網頁瀏覽。希望網頁設計人員可以解決它的CSS多重設置問題，從而使其更適合現在網頁瀏覽需求的布局方式。

參考文獻

[1] 彭雪萍.試析響應式網頁的設計與開發[J].電腦編程技巧與維護，2018（10）：8-10.

[2] 葉潮流，馬林山.基于HTML5+CSS3+jQuery的響應式布局網頁設計[J].梧州學院學報，2018，28（3）：22-35.

[3] 徐健.響應式網頁設計案例實現與分析[J].信息與電腦：理論版，2018（6）：13-15.

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

[5] 洪濤.平面設計專業網頁設計課程教學改革研究[J].美術教育研究，2017（18）：90-91.

[6] 陳潔.案例教學法在網頁設計教學中的應用研究[J].佳木斯職業學院學報，2017（7）：429-430.

[7] 袁琳.案例教學在計算機網頁設計課中的應用[J].新西部：理論版，2016（20）：109，133.

[8] 龍安源.高職院校網頁設計人才培養與教學模式的創新與實踐[J].科技經濟導刊，2016（17）：144.