MediaQueries移動設(shè)備樣式.ppt

廣州大學(xué)華軟軟件學(xué)院,第7講 Media Queries移動設(shè)備樣式,請到 240FTP / HTML5移動Web開發(fā) 下載第7講文件夾,主要內(nèi)容,屬性選擇器 偽類選擇器 陰影 背景 圓角邊框 Media Querise 移動設(shè)備樣式 把傳統(tǒng)網(wǎng)站移植成移動Web網(wǎng)站 習(xí)題,詳細(xì)內(nèi)容,概述 Media Queries的使用方式 把傳統(tǒng)網(wǎng)站移植成移動Web網(wǎng)站 習(xí)題,1、概述,Media Queries直譯過來就是“媒體查詢”，在我們平時的Web頁面中head部分?？吹竭@樣的一段代碼： 或者這樣的形式： import url(“css/style.css“); ,在CSS3中我們可以設(shè)置不同類型的媒體條件，并根據(jù)對應(yīng)的條件，給相應(yīng)符合條件的媒體調(diào)用相對應(yīng)的樣式表。 首先來看一個簡單的實例： 上面的media語句表示的是：當(dāng)頁頁寬度小于或等于600px,調(diào)用small.css樣式表來渲染你的Web頁面。,首先來看一個簡單的實例： 首先來看media的語句中包含的內(nèi)容： 1、screen：這個不用說大家都知道，指的是一種媒體類型； 2、and：被稱為關(guān)鍵詞，與其相似的還有not,only，稍后會介紹； 3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。,（1） 媒體類型（Media Type）,媒體類型(Media Type)在css2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設(shè)備指定不同的樣式，在css2中我們常碰到的就是 all（全部）,screen（屏幕）,print（頁面打印或打邱預(yù)覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型。,（1） 媒體類型（Media Type）,頁面中引入媒體類型方法也有多種： 1、link方法引入 2、xml方式引入 ,（1） 媒體類型（Media Type）,3、import方式引入 import引入有兩種方式，一種是在樣式文件中通過import調(diào)用別一個樣式文件；另一種方法是 在/head中的.中引入，單這種使用方法在 ie6-7都不被支持 如樣式文件中調(diào)用另一個樣式文件： import url(“css/reset.css“) screen; import url(“css/print.css“) print;,（1） 媒體類型（Media Type）,3、import方式引入 在/head中的.中調(diào)用： import url(“css/style.css“) all; ,（1） 媒體類型（Media Type）,4、media引入 這種引入方式和imporr是一樣的，也有兩種方式： 樣式文件中使用： media screen 選擇器 屬性：屬性值； ,（1） 媒體類型（Media Type）,4、media引入 在/head中的.中調(diào)用： media screen 選擇器 屬性：屬性值； ,（2）媒體特性（Media Query）,Media Query是CSS3 對Media Type的增強版，其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規(guī)則)，常用的特性w3c共列出來13種。,（2）媒體特性（Media Query）,為了更能理解Media Query，我們在次回到前面的實例上： 轉(zhuǎn)換成css中的寫法為： media screen and (max-width: 600px) 選擇器 屬性：屬性值； ,主要區(qū)別在： 1、Media query只接受單個的邏輯表達式作為其值，或者沒有值； 2、css屬性用于聲明如何表現(xiàn)頁頁的信息；而Media Query是一個用于判斷輸出設(shè)備是否滿足某種條件的表達式； 3、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關(guān)系，表示應(yīng)用于大于等于或者小于等于某個值的情況 4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因為其表達式返回的只有真或假兩種。,詳細(xì)內(nèi)容,概述 Media Queries的使用方式 把傳統(tǒng)網(wǎng)站移植成移動Web網(wǎng)站 習(xí)題,Media Queries的使用方式,一、最大寬度Max Width 上面表示的是：當(dāng)屏幕小于或等于600px時，將采用small.css樣式來渲染W(wǎng)eb頁面。 二、最小寬度Min Width 上面表示的是：當(dāng)屏幕大于或等于900px時，將采用big.css樣式來渲染W(wǎng)eb頁面。,Media Queries的使用方式,三、多個Media Queries使用 Media Query可以結(jié)合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關(guān)鍵字，以及一種Media Type。 正如上面的其表示的是當(dāng)屏幕在600px-900px之間時采用style.css樣式來渲染web頁面。,Media Queries的使用方式,四、設(shè)備屏幕的輸出寬度Device Width 上面的代碼指的是iphone.css樣式適用于最大設(shè)備寬度為480px，比如說iPhone上的顯示，這里的max-device-width所指的是設(shè)備的實際分辨率，也就是指可視面積分辨率,Media Queries的使用方式,五、iPhone4 上面的樣式是專門針對iPhone4的移動設(shè)備寫的。,Media Queries的使用方式,六、iPad 在大數(shù)情況下，移動設(shè)備iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明了不同的方向，比如說 上面的例子，在縱向(portrait)時采用portrait.css來渲染頁面； 在橫向（landscape）時采用landscape.css來渲 染頁面。,Media Queries的使用方式,七、android /*240px的寬度*/ /*360px的寬度*/ /*480px的寬度*/ ,Media Queries的使用方式,八、not關(guān)鍵字 not關(guān)鍵字是用來排除某種制定的媒體類型，換句話來說就是用于排除符合表達式的設(shè)備。,Media Queries的使用方式,九、only關(guān)鍵字 only用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的。,Media Queries的使用方式,十、其他 在Media Query中如果沒有明確指定Media Type，那么其默認(rèn)為all，如： 十一、加載 建議在已有的樣式表中追加媒體查詢樣式。使用如下語法即可在已有樣式表中加入媒體查詢： media screen and (max-width: 768px) /*樣式*/,例 ex7_1.html 添加如下代碼，調(diào)整瀏覽器寬度,詳細(xì)內(nèi)容,概述 Media Queries的使用方式 把傳統(tǒng)網(wǎng)站移植成移動Web網(wǎng)站 習(xí)題,回顧 ViewPort,ViewPort 標(biāo)記用于指定用戶是否可以縮放Web頁面，如果可以，那么縮放到的最大和最小縮放比例是什么。 使用 ViewPort 標(biāo)記還表示文檔針對移動設(shè)備進行了優(yōu)化。 ViewPort 標(biāo)記的content值 是由指令及其值組成的以逗號分隔的列表。,3、Media Queries如何工作,3、Media Queries如何工作,3、把傳統(tǒng)網(wǎng)站移植成移動Web網(wǎng)站,考慮內(nèi)容優(yōu)先 三欄 - 兩欄 - 一欄 寬度改為百分比,3、把傳統(tǒng)網(wǎng)站移植成移動Web網(wǎng)站,我們來看一下上節(jié)課的作業(yè) sample.html html5.css 見 文件夾 “ex7_2”,3、把傳統(tǒng)網(wǎng)站移植成移動Web網(wǎng)站,文件夾 “ex7_3”,三欄的情況,第一步,在sample.html中添加代碼，注意順序。,第二步新建ipad.css,兩欄的情況,第三步新建iphone.css,請大家動手改寫iphone.css，使得頁面適應(yīng)屏幕寬度低于550px的顯示，顯示效果為一欄。 如下圖所示。,一欄的情況,根據(jù)文檔“修改瀏覽器.doc”修改瀏覽器，查看網(wǎng)頁在移動端的實際顯示情況。 屏幕大小為：700*800 看不清字體 怎么辦？,大多數(shù)開發(fā)人員使用像素來定義字體的大小。雖然像素在普通網(wǎng)站使用是OK的，但是對于響應(yīng)式網(wǎng)站來說應(yīng)該有響應(yīng)式的字體。事實上，一個響應(yīng)式的字體大小應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣它才可以適應(yīng)客戶端 的屏幕。 CSS3 規(guī)范引入了一個新的單位叫 rem，和 em 類相似，但相對于 HTML 元素來說， rem 更