溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS3中媒體特性的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
CSS3 媒體特性與Responsive設計
隨著科學技術不斷地向前發(fā)展，網(wǎng)頁的瀏覽終端越來越多樣化，用戶可以通過寬屏電視、臺式電腦、筆記本電腦、平板電腦和智能手機來訪問網(wǎng)站。盡管無法保證一個網(wǎng)站在不同屏幕尺寸和不同設備上 看起來一模一樣， 但至少要讓你的Web頁面能適配用戶的終端， 讓它更好地呈現(xiàn)在用戶面前。 使用CSS3中的MediaQuery模塊來讓一個頁面適應不同的終端（ 或屏幕尺寸）， 從而讓頁面有一個更好的用戶體驗。
媒體類型媒體類型（ Media Type） 在CSS2中是一個常見的屬性， 也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式。
媒體類型引用方法在實際中媒體類型有近十種之多， 實際常用的也就那么幾種。 不過媒體類型的引用方法也有多種， 常見的媒體類型引用方法主要有：
link標簽、
xml方式、
@import
CSS3新增的@media
1. link方法
link方法引入媒體類型其實就是在< link>標簽引用樣式的時候， 通過link標簽中的media屬性來指定不同的媒體類型。 這種方式引入媒體類型時常跟著引用的樣式文件走， 如下所示：
< link rel="stylesheet" type=" text/css" href="style.css" media="screen" />
< link rel=" stylesheet" type=" text/css" href=" print.css" media=" print" />
2. xml方式
xml方式引用媒體類型和link引入媒體類型極其相似， 也是通過media屬性來指定。
<? xml- stylesheet rel=" stylesheet" media=" screen" href=" style. css" ?>
3. @import方式
@import是用來引用樣式文件方法之一， 同樣也可以用來引用媒體類型。@import引入媒體類型主要有兩種方式，
http:/ /www.iis7.com/b/plc/
一種：是在樣式中通過@import調用另一個樣式文件；
另一種：是在<head></ head>標簽中的<style></style>中引入， 但這種使用方法在IE 6 和 IE 7 中都不被支持， 如樣式文件中調用另一個樣式文件時， 就可以指定對應的媒體類型。 @import url(reset. css) screen; @import url(print. css) print; 在<head>中的<style>標簽中引入媒體類型方法。 <head> <style type=" text/css"> @import url(style.css) all; </style> </head>
4. @media方式
@media是CSS3中新引進的一個特性， 稱為媒體查詢。 在頁面中也可以通過這個屬性來引入媒體類型。@media引入媒體類型和@import有點類似， 也具有兩種方式：
1). 在樣式文件中引用媒體類型： @media screen { 選擇器{/* 你的樣式代碼寫在這里…*/} }
2). 使用@media引入媒體類型的方式是在<head> 標簽中的<style>中引用。 <head> <style type=" text/css"> @media screen{ 選擇器{/* 你的 樣式 代碼 寫在 這里…*/} } </ style> </ head>
媒體特性：
媒體特性（Media Query）是CSS3對媒體類型（ Media Type） 的增強版， 其實可以將Media Query看成“ Media Type（ 判斷條件）+ CSS（ 符合條件的樣式規(guī)則）”。
Media Query和CSS的屬性集合很相似， 主要區(qū)別在如下：
·Media Query 只接受單個的邏輯表達式作為其值，或者沒有值。
·CSS屬性用于聲明如何表現(xiàn)頁面的信息；而Media Query是一個用于判斷輸出設備是否滿足某種條件的表達式。
·Media Query 中的大部分接受 min/ max 前綴，用來表達其邏輯關系，表示應用于大于等于或小于等于某個值的情況。
·CSS屬性要求必須有屬性值， Media Query 可以沒有值，因為其表達式返回的只有真或假兩種。
Media Query使用方法：
Media Query 能在不同的條件下使用不同的樣式， 使頁面在不同在終端設備下達到不同的渲染效果。 Media Query 有其自己的使用規(guī)則。 具體來說， Media Query 的使用方法如下：
@media 媒體類型 and （媒體特性）{ 你的樣式} 使用 Media Query 時必須要使用@media開頭， 然后指定媒體類型（ 也可以稱為設備類型）， 隨后是指定媒體特性（ 也可以稱之為設備特性）。
媒體特性的書寫方式和樣式的書寫方式非常相似， 主要分為兩個部分，
第一個部分 指的是媒特性，
第二個部分 為媒體特性所指定的值， 而且這兩個部分之間使用冒號分隔。 例如： (max- width: 480px) 將其組合就類似于不同的 CSS集合。 但與CSS屬性不同的是， 媒體特性是通過min/ max 來表示大于、等于或小于作為邏輯判斷， 而不是使用小于（<）和 大于（>） 這樣的符號來判斷。
1. 最大寬度 max-width “max-width”是媒體特性中最常用的一個特性，其意思是指媒體類型小于或等于指定的寬度時，樣式生效，
2. 最小寬度 min-width min-width與max-width相反，即媒體類型大于或等于指定寬度時， 樣式生效。
3. 多個媒體特性使用 Media Queries 可以使用關鍵詞“ and”將多個媒體特性結合在一起。也就是說， 一個Media Query中可以包含0到多個表達式， 表達式又可以包含0到多個關鍵字， 以及一種 媒體類型。
4. 設備屏幕的輸出寬度Device Width在智能設備上，例如 iPhone、iPad 等，還可以根據(jù)屏幕尺寸來設置相應的樣式（或者調用相應的樣式文件）。 對于屏幕同樣可以使用 min/ max 對應參數(shù)， 如min-device-width 或者max-device-width。
5. not關鍵詞，關鍵詞not用來排除某種制定的媒體類型，也就是排除符合表達式的設備。換句話說，not關鍵詞表示對后面的表達式執(zhí)行取反操作。如下所示：
@media not print and (max- width: 1200px){ 樣式 代碼} 代碼表示的是， 樣式代碼將被使用在除打印設備和屏幕寬度小于1200px的所有設備中。
6. only關鍵詞，only用來指定某種特定的媒體類型， 可以排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對不支持Media Query 卻支持 Media Type 的設備隱藏樣式表。 例如，支持媒體特性 的設備正常調用樣式，此時就當only不存在；不支持媒體特性但支持媒體類型的設備， 這樣就不會讀樣式， 因為其會先讀取only而不是screen；不支持 Media Query 的瀏覽器，不論是否支持 only，樣式都不會被采用。
：Responsive(響應式)布局概念：
隨著用戶訪問Web頁面終端多樣化，比如說 iPad、iPhone、平板電腦、臺式機以及筆記本等，以前的設計目前再無法適應這些多樣化的終端設備。 為了滿足用戶的需求，Ethan Marcotte 在A List Apart 發(fā)表了 一篇開創(chuàng)性的文章，將三種已有的開發(fā)技術（ 彈性網(wǎng)格布局、彈性圖片、媒體和媒體查詢） 整合起來，并將其命名為RWD（ Responsive Web Design， 響應式設計）。
什么是響應式設計呢？
維基百科是這樣描述的： Responsive設計為RWD， 是精心提供各種設備都能瀏覽網(wǎng)頁的一種設計方法， RWD能讓網(wǎng)頁在不同的設備中展現(xiàn)不同的設計風格。 由此可見， RWD不是流體布局， 也不是 網(wǎng)格布局， 而是一種獨特的網(wǎng)頁設計方法。
Responsive設計特點
Responsive網(wǎng)頁設計，不但要考慮其元素布局的秩序，還要做到“有求必應”，因此需要滿足三個條件。Responsive設計之父EthanMarcotte是這樣描述這三個條件的。
-網(wǎng)站必須建立靈活的網(wǎng)格基礎；
-引用到網(wǎng)站的圖片必須是可伸縮的；
-不同的顯示風格， 需要在 Media Query 上設置不同的樣式。
-缺少任何一個功能， 就不能稱為是合格的Responsive網(wǎng)頁設計。
Responsive中的術語
在響應式設計中， 有一些其專有的術語， 而且理解這些術語對于幫助理解和學習響應式設計至關重要。
1. 流體網(wǎng)格
流體網(wǎng)格是一個簡單的網(wǎng)格系統(tǒng)，這種網(wǎng)格設計參考了流體設計中的網(wǎng)格系統(tǒng)，將每個網(wǎng)格格子使用百分比單位來控制網(wǎng)格大小。這種網(wǎng)格系統(tǒng)最大的好處是讓網(wǎng)格大小隨時根據(jù)屏幕尺寸大小做出相 對應的比例縮放。
2. 彈性圖片
彈性圖片指的是不給圖片設置固定尺寸，而是根據(jù)流體網(wǎng)格進行縮放，用于適應各種網(wǎng)格的尺寸。而實現(xiàn)方法是比較簡單， 一條代碼就能確定。img {max- width: 100%;}
3. 媒體查詢
媒體查詢在CSS3中得到了強大的擴展。使用這個屬性可以讓設計根據(jù)用戶終端設備適配對應的樣式。這也是響應式設計中最為關鍵的。可以說，Responsive設計離開了 Medial Query 就失去了它 生存的意義。 簡單地說， 媒體查詢可以根據(jù)設備的尺寸， 查詢出適配的樣式。
Responsive設計最關注的就是： 根據(jù)用戶的使用設備的當前寬度， Web頁面將加載一個備用的樣式， 實現(xiàn)特定的頁面 風格。
4. 屏幕分辨率
屏幕分辨率指的是用戶使用的設備瀏覽Web頁面時的分辨率， 比如智能手機瀏覽器、 移動電腦瀏覽器、 平板電腦瀏覽器和桌面瀏覽器。 Responsive設計利用Media Query屬性針對瀏覽器使用的 分辨率來適配對應的CSS樣式。 因此屏幕分辨率在Responsive設計中是一個很重要的東西， 因為只有知道Web頁面要在哪種分辨率下顯示何種效果， 才能調用對應的樣式。
5. 主要斷點
主要斷點，在Web開發(fā)中是一個新詞，但其是 Responsive 設計中很重要的一部分。簡單的描述就是，設備寬度的臨界點。在 Media Query 中，媒體特性 min-width 和 max- width 對應的屬性值 就是響應式設計中的斷點值。簡單點說，就是使用主要斷點和次要斷點，創(chuàng)建媒體查詢的條件。 而每個斷點會對應調用一個樣式文件（或者樣式代碼），主要斷點加載樣式文件將直接影響Web的 效果。除了主要斷點之外，為了滿足更多效果， 還可以在這個基礎上添加次要斷點。不過主要斷點和次要斷點增加之后，需要維護的樣式也相應地增加， 成本也相對應地增加。因此在實際使用中， 需要根據(jù)自身產品需求，決定斷點。綜合下來，設置斷點應把握以下三個要點。
-滿足主要的斷點；
-有可能的話添加一些別的斷點；
-設置高于1024px的桌面斷點。
Responsive 布局技巧：
布局是一個再簡單不過的問題了，也是每個網(wǎng)頁設計中必須包含的部分，但使用 Responsive 設計第一步要做的事情是讓頁面布局盡量簡單。 實現(xiàn)一個簡單的布局有一些小技巧。
1. 盡量少用無關緊要的div；
2. 不要使用內聯(lián)元素（ inline）；
3. 盡量少用JS或Flash；
4. 丟棄沒用的絕對定位和浮動樣式；
5. 摒棄任何冗余結構和不使用100%設置。 有舍才有得， 哪些東西 能幫助 Responsive 確定更好的布局呢？
6. 使用HTML5 Doctype和相關指南；
7. 重置好樣式（ reset. css）；
8. 一個簡單的有語義的核心布局；
9. 給重要的網(wǎng)頁元素使用簡單的技巧， 比如 導航 菜單 之類 元素。
使用這些技巧，無非是為了保持HTML簡單干凈，而且在頁面布局中的關鍵部分（ 元素）不要過分依賴現(xiàn)代技巧來實現(xiàn)，比如說 CSS3 特效或者JS腳本。 說了這么多，怎么樣的布局或者說HTML 結構才是簡單干凈的呢？ 這里介紹一個快速測試的方法。首先禁掉頁面中所有的樣式（以及與樣式相關的信息）， 在瀏覽器中打開，如果內容排列有序，方便閱讀，那么這個結構就不會差到哪里去。
meta標簽：
當Responsive設計頁面在智能設備中進行測試的時候（比如說iPhone或Android），會驚奇地發(fā)現(xiàn)，所有的媒體查詢都不會生效—頁面仍展示為普通的樣式， 即一個全局縮小后的頁面。這是因為許多智能手機都使用了一個比實際屏幕尺寸大很多的虛擬可視區(qū)域， 主要目的就是讓頁面在智能手機端閱讀時不會因為實際可視區(qū)域而變形。為了讓智能手機能根據(jù)媒體查詢匹配對應樣式，讓頁面在 智能手機中正常顯示， 特意添加了一個特殊的meta標簽。這個標簽的主要作用就是讓智能手機瀏覽網(wǎng)頁時能進行優(yōu)化，并且可以自定義界面可視區(qū)域的尺寸和縮放級別。 meta標簽使用方法如右： < meta name=" viewport" content="" />
在實際項目中，為了讓Responsive設計在智能設備中能正常顯示，也就是瀏覽Web頁面時能適應屏幕的大小并顯示在屏幕上，這可以通過這個可視區(qū)域的meta標簽進行重置， 告訴它使用設備的 寬度為視圖的寬度， 也就是說， 禁止其默認的自適應頁面的效果， 具體設置如下：
<meta name=" viewport" content=" width= device- width, initial- scale= 1. 0" />
另外，由于Responsive設計只有結合CSS3的Media Queries屬性，才能盡顯Responsive設計風格，故瀏覽器必須支持 CSS3 Media Queries。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3中媒體特性的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業(yè)資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
