|
1、CSS3中的Media Query（媒介查詢(xún)）是什么？ 通過(guò)不同的媒介類(lèi)型和條件定義樣式表規(guī)則。媒介查詢(xún)讓CSS可以更精確作用于不同的媒介類(lèi)型和同一媒介的不同條件。媒介查詢(xún)的大部分媒介特性都接受min和max用于表達(dá)”大于或等于”和”小于或等于”。如：width會(huì)有min-width和max-width媒介查詢(xún)可以被用在CSS中的@media和@import規(guī)則上，也可以被用在HTML和XML中。通過(guò)這個(gè)標(biāo)簽屬性，我們可以很方便的在不同的設(shè)備下實(shí)現(xiàn)豐富的界面，特別是移動(dòng)設(shè)備，將會(huì)運(yùn)用更加的廣泛。 2、media query能夠獲取哪些值？ 設(shè)備的寬和高device-width，device-height顯示屏幕/觸覺(jué)設(shè)備。 渲染窗口的寬和高width，height顯示屏幕/觸覺(jué)設(shè)備。 設(shè)備的手持方向，橫向還是豎向orientation（portrait|lanscape）和打印機(jī)等。 畫(huà)面比例aspect-ratio點(diǎn)陣打印機(jī)等。 設(shè)備比例device-aspect-ratio-點(diǎn)陣打印機(jī)等。 對(duì)象顏色或顏色列表color，color-index顯示屏幕。 設(shè)備的分辨率resolution。 3、語(yǔ)法結(jié)構(gòu)及用法 @media 設(shè)備名 only （選取條件） not （選取條件） and（設(shè)備選取條件），設(shè)備二{sRules} 示例一：在link中使用@media： <link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），only screen and （max-device-width： 480px）” href=“l(fā)ink.css”/> 上面使用中only可省略，限定于計(jì)算機(jī)顯示器，第一個(gè)條件max-width是指渲染界面最大寬度，第二個(gè)條件max-device-width是指設(shè)備最大寬度。 示例二：在樣式表中內(nèi)嵌@media： @media （min-device-width:1024px） and （max-width:989px），screen and （max-device-width:480px），（max-device-width:480px） and （orientation:landscape），（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait） {srules} 在示例二中，設(shè)置了電腦顯示器分辨率（寬度）大于或等于1024px（并且最大可見(jiàn)寬度為989px）；屏寬在480px及其以下手持設(shè)備；屏寬在480px以及橫向（即480尺寸平行于地面）放置的手持設(shè)備；屏寬大于或等于480px小于1024px以及垂直放置設(shè)備的css樣式。 從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號(hào)內(nèi)，srules為兼容設(shè)置的樣式表，包含在中括號(hào)里面。only（限定某種設(shè)備，可省略），and（邏輯與），not（排除某種設(shè)備）為邏輯關(guān)鍵字，多種設(shè)備用逗號(hào)分隔，這一點(diǎn)繼承了css基本語(yǔ)法。 4、可用設(shè)備名參數(shù)：  可用設(shè)備名參數(shù) 5、邏輯關(guān)鍵字：  邏輯關(guān)鍵字 6、可用設(shè)備名參數(shù)：  可用設(shè)備名參數(shù) 7、測(cè)試Media Queries 最后，我們需要對(duì)我們剛剛設(shè)計(jì)的Media Queries進(jìn)行測(cè)試，想要在不同設(shè)備上測(cè)試Media Queries的效果，可以使用一個(gè)瀏覽工具來(lái)檢驗(yàn)不同尺寸屏幕下的顯示效果，在這里為大家介紹一個(gè)不錯(cuò)的在線(xiàn)工具 – Responsivator，它可以模擬iPhone等各種不同設(shè)備，并且還可以自定義不同尺寸屏幕的顯示效果，只需要輸入一個(gè)url甚至是本地的一個(gè)url（如：http://127.0.0.1/），就可以看到網(wǎng)站在不同尺寸屏幕下的顯示效果。 8、通過(guò)Media Queries實(shí)現(xiàn)響應(yīng)式布局設(shè)計(jì) 好了，我們明白了什么是Media Query，那我們一起來(lái)運(yùn)用到響應(yīng)式布局的設(shè)計(jì)項(xiàng)目中去。設(shè)計(jì)思路很簡(jiǎn)單，首先先定義在標(biāo)準(zhǔn)瀏覽器下的固定寬度（假如標(biāo)準(zhǔn)瀏覽器的分辨率為1024px，那么我們?cè)O(shè)置寬為980px），然后用Media Query來(lái)監(jiān)測(cè)瀏覽器的尺寸變化，當(dāng)瀏覽器的分辨率小于1024px的時(shí)候，則通過(guò)Media Query預(yù)設(shè)的樣式表來(lái)將頁(yè)面的寬度設(shè)置為百分比顯示，這樣子頁(yè)面的結(jié)構(gòu)元素就會(huì)根據(jù)瀏覽器的的尺寸來(lái)進(jìn)行相對(duì)應(yīng)的調(diào)整。同理，當(dāng)瀏覽器的可視區(qū)域改變到某個(gè)值（假如為650px）的時(shí)候，頁(yè)面的結(jié)構(gòu)元素根據(jù)Media Query預(yù)設(shè)的層疊樣式表來(lái)進(jìn)行相對(duì)應(yīng)的調(diào)整?？纯次覀兊睦樱?/div> /* 當(dāng)瀏覽器的可視區(qū)域小于980px */ @media screen and （max-width： 980px） { #wrap {width： 90%; margin:0 auto;} #content {width： 60%;padding： 5%;} #sidebar {width： 30%;} #footer {padding： 8% 5%;margin-bottom： 10px;} } /* 當(dāng)瀏覽器的可視區(qū)域小于650px */ @media screen and （max-width： 650px） { #header {height： auto;} #searchform {position： absolute;top： 5px;right： 0;} #content {width： auto; float： none; margin： 20px 0;} #sidebar {width： 100%; float： none; margin： 0;} } 通過(guò)上面我們就可以監(jiān)測(cè)瀏覽器的可視區(qū)域變化的是時(shí)候我們的頁(yè)面結(jié)構(gòu)元素也會(huì)相對(duì)應(yīng)的變化，當(dāng)然你可以再多設(shè)置幾個(gè)尺寸的監(jiān)測(cè)層疊樣式表，這樣子就可以根據(jù)不同尺寸設(shè)備來(lái)進(jìn)行響應(yīng)式的布局。為了更好的顯示效果，我們往往還要格式化一些CSS屬性的初始值： /* 禁用iPhone中Safari的字號(hào)自動(dòng)調(diào)整 */ html { -webkit-text-size-adjust： none; } /* 設(shè)置HTML5元素為塊 */ article， aside， details， figcaption， figure， footer， header， hgroup， menu， nav， section { display： block; } /* 設(shè)置圖片視頻等自適應(yīng)調(diào)整 */ img { max-width： 100%; height： auto; width： auto\9; /* ie8 */ } .video embed， .video object， .video iframe { width： 100%; height： auto; } 最后要注意的是在頁(yè)面的頭部<head></head>之間加上下面這句∶ <meta name=“viewport” content=“width=device-width; initial-scale=1.0”> meta viewport這個(gè)屬性是在移動(dòng)設(shè)備上設(shè)置原始大小顯示和是否縮放的聲明。 參數(shù)設(shè)置∶ width – viewport的寬度 height – viewport的高度 initial-scale – 初始的縮放比例 minimum-scale – 允許用戶(hù)縮放到的最小比例 maximum-scale – 允許用戶(hù)縮放到的最大比例 user-scalable – 用戶(hù)是否可以手動(dòng)縮放 比如一個(gè)移動(dòng)終端屏幕顯示最大寬度為480px，那么css代碼如下： @media only screen and(max-device-width:480px){…/*此處為支持此移動(dòng)設(shè)備的css樣式代碼，需將其放置于pc終端css代碼之后覆蓋之*/} 如果是大型的網(wǎng)站或項(xiàng)目，我們講為各類(lèi)型的移動(dòng)終端獨(dú)立編寫(xiě)css樣式文件，此時(shí)的使用方式如下： <link rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width:480px)” href=”small_screen480.css”> /*small_screen480.css即為對(duì)480px大小移動(dòng)終端書(shū)寫(xiě)的css文件*/ css文件被區(qū)分引用，接下來(lái)的工作就是我們非常熟識(shí)的彈性布局了，另外再注意倆點(diǎn)，一是圖片，在移動(dòng)設(shè)備上，要做一些特定適合的小圖片來(lái)匹配，如果單純使用壓縮的圖片會(huì)不失真，影響用戶(hù)體驗(yàn)；二是在頭部加入如下代碼，目的是聲明在移動(dòng)設(shè)備上設(shè)置原始大小顯示和是否縮放 <meta name=”viewport” content=”width=device-width; initial-scale=1.0″> 最后說(shuō)下IE瀏覽器，因?yàn)樗恢С謒edia Queries的，使用時(shí)需要引用一個(gè)Media Query Javascript解決，如下： <!–[if lt IE 9]> <script src=”../../css3-mediaqueries.js”></script> <![endif]–>
|
