淺談CSS3MediaQuery的使用方法

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

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

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

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

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

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

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

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