淺談CSS3MediaQuery的使用方法

1、    淺談css3mediaquery的使用方法    陸郁摘  要：網(wǎng)頁設計人員都希望開發(fā)的網(wǎng)頁可以適用于各種終端設備上，使瀏覽者可以完整、友好地瀏覽網(wǎng)頁。響應式布局的提出恰恰可以滿足這一需求。而響應式布局的關鍵就是要通過media query媒介查詢對終端設備的顯示尺寸進行檢測。該文分別對media query媒介查詢、media query使用及其優(yōu)、缺點進行闡述，希望對網(wǎng)頁設計人員在實現(xiàn)響應式布局時有所幫助。關鍵詞：響應式布局  media query  css：tp393    ：a ：167

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

3、詢）無論是從iphone手機的320px還是大屏顯示器2560px，網(wǎng)頁總會以一種自適應的方式完美呈現(xiàn)給瀏覽者。這就需要在網(wǎng)頁顯示之前對訪問終端設備的屏幕尺寸的檢測，并根據(jù)不同尺寸將網(wǎng)頁內容按css設置分別給予顯示。media query可以對輸出設備的屏幕可見高度、最大高度、最小高度;屏幕可見寬度、最大寬度、最小寬度;頁面可見區(qū)域高度、最大高度、最小高度;頁面可見區(qū)域寬度、最大寬度、最小寬度等媒介特征給予檢測。media query對設備終端的顯示尺寸可以根據(jù)每個網(wǎng)頁設計人員不同的設計需求來進行反饋。其語法是：media 媒體終端 and|not|only （媒介特征）顯示設置內容其中，主流

4、瀏覽器都支持"screen"（計算機屏幕）、"print"（打印預覽模式 / 打印頁）以及 "all" （適合所有設備）這3項設置。2  media query的使用2.1 在中使用標記是html語言中用于鏈接樣式表的標記語言，它放于標記部分。它有rel、href、media、sizes等屬性，其中media屬性就是設置被鏈接文檔將顯示在外部訪問終端上。例如：。2.2 在css中使用css可以為超文本編輯語言（html）或可擴展標記語言（xml）提供文件樣式的設定，例如，對文字的字體、字號、顏色等的設定。css對這些標記進行

5、設置時，要求設置內容需用花括號包圍起來，所以在css中使用media query，需要檢測滿足條件時，css設定才會有效。例如：media screen and（max-width：320px）.rowwidth：100%;2.3 在improt中使用如果一組樣式設定需要反復使用，那么我們可以將這組css設定放在一個文件中，如果需要，可以隨時將其導入。import則可以實現(xiàn)這一功能。結合于media query檢測反饋信息，當條件被滿足時，使用import將外部css文件導入。此時，寫在外部css樣式文件中的樣式設定才會有效。例如：import url（"bujuyangshi1.c

6、ss"） screen and（max-width：320px）;3  響應式布局的優(yōu)點和缺點3.1 響應式布局的優(yōu)點網(wǎng)頁的顯示效果可以根據(jù)不同的訪問終端進行合理的響應和調整。無論瀏覽者是通過筆記本還是手機終端，頁面都可以通過media query媒介查詢之后自動切換分辨率，按照顯示比例對圖片尺寸進行調整，對顯示文字字號及行容量進行掌控，甚至對相關腳本都可以滿足不同訪問終端的使用需求。這種網(wǎng)頁布局方式，可以兼容現(xiàn)在及未來不同機型，具有前趨性。并且，響應式布局是針對頁面的設計，對于其開發(fā)、運營和后期維護相對多個版本成本會降低，也減少了網(wǎng)站維護人員的工作量。3.2 響應式布局的

7、缺點由于響應式布局需要滿足不同顯示比例的設備輸出，所以它需要設定不同的css及腳本代碼。這就使網(wǎng)頁在顯示加載時的速度會受到一定的影響，特別是一些大型的門戶型網(wǎng)站或圖片、視頻較多的電子商務型站，會使其運行速度降低。而且，終端屏幕尺寸的使用比率是不同的，這就會使一些css設定使用率較低，既造成了加載負荷又使代碼造成冗余。4  結語總之，響應式網(wǎng)頁布局是使用media query媒介查詢來設置css樣式，以適應不同訪問終端屏幕的使用需求，使瀏覽者可以在不同的訪問設備下進行網(wǎng)頁瀏覽。希望網(wǎng)頁設計人員可以解決它的css多重設置問題，從而使其更適合現(xiàn)在網(wǎng)頁瀏覽需求的布局方式。參考文獻1 彭雪萍.

8、試析響應式網(wǎng)頁的設計與開發(fā)j.電腦編程技巧與維護，2018（10）：8-10.2 葉潮流，馬林山.基于html5+css3+jquery的響應式布局網(wǎng)頁設計j.梧州學院學報，2018，28（3）：22-35.3 徐健.響應式網(wǎng)頁設計案例實現(xiàn)與分析j.信息與電腦：理論版，2018（6）：13-15.4 吳多智，陳益全.響應式網(wǎng)頁設計案例實現(xiàn)與分析j.安徽電子信息職業(yè)技術學院學報，2016，15（2）：14-17，23.5 洪濤.平面設計專業(yè)網(wǎng)頁設計課程教學改革研究j.美術教育研究，2017（18）：90-91.6 陳潔.案例教學法在網(wǎng)頁設計教學中的應用研究j.佳木斯職業(yè)學院學報，2017（7）：429-430.7 袁琳.案例教學在計算機網(wǎng)頁設計課中的應用j.新西部：理論版，2016（20）：109，133.8 龍安源.高職院校網(wǎng)頁設計人才培養(yǎng)與教學模式的創(chuàng)新與實踐j.科技經(jīng)濟導刊，2016（17）：144.科技資訊2019