當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

十天精通CSS3(11)

發布時間：2025/4/16 CSS 50 豆豆

生活随笔收集整理的這篇文章主要介紹了十天精通CSS3(11) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Media Queries——媒體類型（一）

隨著科學技術不斷的向前發展，網頁的瀏覽終端越來越多樣化，用戶可以通過：寬屏電視、臺式電腦、筆記本電腦、平板電腦和智能手機來訪問你的網站。盡管你無法保證一個網站在不同屏幕尺寸和不同設備上看起來完全一模一樣，但至少要讓你的Web頁面能適配用戶的終端，讓他更好的呈現在你的用戶面前。在本節中，將會學到如何使用CSS3中的Media Queries模塊來讓一個頁面適應不同的終端（或屏幕尺寸），從而讓你的頁面讓用戶有一個更好的體驗。

Media Queries

Media Queries是CSS3新增加的一個模塊功能，其最大的特色就是通過CSS3來查詢媒體，然后調用對應的樣式。其實這個功能在CSS2.1中就有出現過，只不過那個時候此功能并不強大，我們最常見的就是給打印設備添加打印樣式。隨著時代的變化，這個模塊功能越來越強大。

在徹底的了解Media Queries我們需要了解其中的兩個重要部分，第一個是媒體類型，第二個是媒體特性。下面的內容我們簡單的來了解這兩個部分：

一、媒體類型

媒體類型（Media Type）在CSS2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式。

在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(頁面打印或打印預覽模式)，其實媒體類型遠不止這三種，W3C總共列出了10種媒體類型。如下表所示：

值	設備類型
All	所有設備
Braille	盲人用點字法觸覺回饋設備
Embossed	盲文打印機
Handheld	便攜設備
Print	打印用紙或打印預覽視圖
Projection	各種投影設備
Screen	電腦顯示器
Speech	語音或音頻合成器
Tv	電視機類型設備
Tty	使用固定密度字母柵格的媒介，比如電傳打字機和終端

其中Screen、All和Print為最常見的三種媒體類型。

media queries——媒體類型（二）

在實際中媒體類型有近十種之多，實際之中常用的也就那么幾種，不過媒體類型的引用方法也有多種，常見的有：link標簽、@import和CSS3新增的@media幾種：

link方法

link方法引入媒體類型其實就是在<link>標簽引用樣式的時候，通過link標簽中的media屬性來指定不同的媒體類型。如下所示。

@import方法

@import可以引用樣式文件，同樣也可以用來引用媒體類型。@import引入媒體類型主要有兩種方式，一種是在樣式中通過@import調用另一個樣式文件；另一種方法是在<head></head>標簽中的<style></style>中引入，但這種使用方法在IE6~7都不被支持，如樣式文件中調用另一個樣式文件時，就可以指定對應的媒體類型。

@importurl(reset.css) screen; @importurl(print.css) print;

在<head>中的<style>標簽中引入媒體類型方法。

<head> <style type="text/css">@importurl(style.css) all; </style> </head>

@media方法

@media是CSS3中新引進的一個特性，被稱為媒體查詢。在頁面中也可以通過這個屬性來引入媒體類型。@media引入媒體類型和@import有點類似也具有兩方式。

（1）在樣式文件中引用媒體類型：

@media screen {選擇器{/*你的樣式代碼寫在這里…*/} }

（2）使用@media引入媒體類型的方式是在<head>標簽中的<style>中引用。

<head> <style type="text/css">@media screen{選擇器{/*你的樣式代碼寫在這里…*/} } </style> </head>

Media Queries使用方法

了解完這些概念性的東西，同學們最想知道的是Media Queries要如何使用？下面我們一起來探討其使用方法：

Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果。前面簡單的介紹了Media Queries如何引用到項目中，但Media Queries有其自己的使用規則。具體來說,Media Queries的使用方法如下。

@media 媒體類型and （媒體特性）{你的樣式}

注意：使用Media Queries必須要使用“@media”開頭，然后指定媒體類型（也可以稱為設備類型），隨后是指定媒體特性（也可以稱之為設備特性）。媒體特性的書寫方式和樣式的書寫方式非常相似，主要分為兩個部分，第一個部分指的是媒體特性，第二部分為媒體特性所指定的值，而且這兩個部分之間使用冒號分隔。例如：

(max-width: 480px)

從前面表中可以得知，主要有十種媒體類型和13種媒體特性，將其組合就類似于不同的CSS集合。但與CSS屬性不同的是，媒體特性是通過min/max來表示大于等于或小于做為邏輯判斷，而不是使用小于（<）和大于（>）這樣的符號來判斷。接下來一起來看看Media Queries在實際項目中常用的方式。

1. 最大寬度max-width

“max-width”是媒體特性中最常用的一個特性，其意思是指媒體類型小于或等于指定的寬度時，樣式生效。如：

@media screen and (max-width:480px){.ads {display:none;} }

上面表示的是：當屏幕小于或等于480px時,頁面中的廣告區塊（.ads）都將被隱藏。

2.最小寬度min-width

“min-width”與“max-width”相反，指的是媒體類型大于或等于指定寬度時，樣式生效。

@media screen and (min-width:900px){ .wrapper{width: 980px;} }

上面表示的是：當屏幕大于或等于900px時，容器“.wrapper”的寬度為980px。

3.多個媒體特性使用

Media Queries可以使用關鍵詞"and"將多個媒體特性結合在一起。也就是說，一個Media Query中可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種媒體類型。

當屏幕在600px~900px之間時，body的背景色渲染為“#f5f5f5”，如下所示。

@media screen and (min-width:600px) and (max-width:900px){body {background-color:#f5f5f5;} }

4.設備屏幕的輸出寬度Device Width

在智能設備上，例如iPhone、iPad等，還可以根據屏幕設備的尺寸來設置相應的樣式（或者調用相應的樣式文件）。同樣的，對于屏幕設備同樣可以使用“min/max”對應參數，如“min-device-width”或者“max-device-width”。

上面的代碼指的是“iphone.css”樣式適用于最大設備寬度為480px，比如說iPhone上的顯示，這里的“max-device-width”所指的是設備的實際分辨率，也就是指可視面積分辨率。

5. not關鍵詞

使用關鍵詞“not”是用來排除某種制定的媒體類型，也就是用來排除符合表達式的設備。換句話說，not關鍵詞表示對后面的表達式執行取反操作，如：

@media not print and (max-width: 1200px){樣式代碼}

上面代碼表示的是：樣式代碼將被使用在除打印設備和設備寬度小于1200px下所有設備中。

6.only關鍵詞

only用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media Type的設備隱藏樣式表的。其主要有：支持媒體特性的設備，正常調用樣式，此時就當only不存在；表示不支持媒體特性但又支持媒體類型的設備，這樣就會不讀樣式，因為其先會讀取only而不是screen；另外不支持Media Queries的瀏覽器，不論是否支持only，樣式都不會被采用。如

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中如果沒有明確指定Media Type，那么其默認為all，如：

<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在樣式中，還可以使用多條語句來將同一個樣式應用于不同的媒體類型和媒體特性中，指定方式如下所示。

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代碼中style.css樣式被用在寬度小于或等于480px的手持設備上，或者被用于屏幕寬度大于或等于960px的設備上。

到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現代瀏覽器中都可以完美支持。還有一個與眾不同的時，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。

Responsive設計（一）

什么是響應式設計呢？維基百科是這樣對響應式作的描述：“Responsive設計簡單的稱為RWD，是精心提供各種設備都能瀏覽網頁的一種設計方法，RWD能讓你的網頁在不同的設備中展現不同的設計風格。”從這一點描述來說，RWD不是流體布局，也不是網格布局，而是一種獨特的網頁設計方法。

響應式設計要考慮元素布局的秩序，而且還需要做到“有求必應”，那就需要滿足以下三個條件：網站必須建立靈活的網格基礎；引用到網站的圖片必須是可伸縮的；不同的顯示風格，需要在Media Queries上寫不同的樣式。

要想靈活的使用Responsive，僅滿足這幾個條件還是不夠的，我們必須對Responsive有一個全面的了解，那么要了解Responsive，就得先了解他的一些術語：

1.流體網格

流體網格是一個簡單的網格系統，這種網格設計參考了流體設計中的網格系統，將每個網格格子使用百分比單位來控制網格大小。這種網格系統最大的好處是讓你的網格大小隨時根據屏幕尺寸大小做出相對應的比例縮放。

2.彈性圖片

彈性圖片指的是不給圖片設置固定尺寸，而是根據流體網格進行縮放，用于適應各種網格的尺寸。而實現方法是比較簡單，一句代碼就能搞定的事情。

img {max-width:100%;}

不幸的是，這句代碼在IE8瀏覽器存在一個嚴重的問題，讓你的圖片會失蹤。當然彈性圖片在響應式設計中如何更好的實現，到目前為止都還存在爭議，也還在不斷的改善之中。

為每一個斷點提供不同的圖片，這是一個比較頭痛的事情，因為Media Queries并不能改變圖片“src”的屬性值，那有沒有辦分法可以解決呢？可以參考一下下面的解決方法。使用background-image給元素使用背景圖片，顯示/隱藏父元素，給父元素使用不同的圖片，然后通過Media Queries來控制這些圖片顯示或隱藏。

來看一個斷點解決圖片自適應的例子。

對應的CSS代碼：

@media (min-device-width:600px){ img[data-src-600px]{content: attr(data-src-600px,url);} } @media (min-device-width:800px){img[data-src-800px] {content:attr(data-src-800px,url);} }

?請注意：這僅僅是解決響應式圖片自適應的一種思路，但這種方案僅僅適配的斷點較少。并不太實用，此處僅為擴展同學們的思路。

3.媒體查詢

媒體查詢在CSS3中得到了強大的擴展。使用這個屬性可以讓你的設計根據用戶終端設備適配對應的樣式。這也是響應式設計中最為關鍵的。可以說Responsive設計離開了Medial Queries就失去了他生存的意義。簡單的說媒體查詢可以根據設備的尺寸，查詢出適配的樣式。Responsive設計最關注的就是：根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。

Responsive設計（二）

4.屏幕分辨率

屏幕分辨簡單點說就是用戶顯示器的分辨率，深一點說，屏幕分辨率指的是用戶使用的設備瀏覽您的Web頁面時的顯示屏幕的分辨率，比如說智能手機瀏覽器、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率。Responsive設計利用Media Queries屬性針對瀏覽器使用的分辨率來適配對應的CSS樣式。因此屏幕分辨率在Responsive設計中是一個很重要的東西，因為只有知道Web頁面要在哪種分辨率下顯示何種效果，才能調用對應的樣式。

5.主要斷點

主要斷點，在Web開發中是一個新詞，但對于Responsive設計中是一個很重要的一部分。簡單的描述就是，設備寬度的臨界點。在Media Queries中，其中媒體特性“min-width”和“max-width”對應的屬性值就是響應式設計中的斷點值。簡單點說，就是使用主要斷點和次要斷點，創建媒體查詢的條件。而每個斷點會對應調用一個樣式文件（或者樣式代碼），如下圖所示：

上圖的style.css樣式文件運用在Web頁面中，但這個樣式文件包括了所有風格的樣式代碼，也就是說所有設備下顯示的風格都通過這個樣式文件下載下來。當然，在實際中還可以使用另一種方法，也就是在不同的斷點加載不同的樣式文件，如下圖所示。

上圖主要顯示的是主要斷點，主要斷點加載的不同樣式文件直接將影響Web的效果。除了主要斷點之外，為了滿足更多效果時，還可以在這個基礎上添次要斷點。不過主要斷點和次要斷點增加之后，需要維護的樣式也相應的增加，成本也相對應的增加。因此在實際使用中，需要根據自身產品需求，決定斷點。

綜合下來，設置斷點應把握三個要點：滿足主要的斷點；有可能的話添加一些別的斷點；設置高于1024的桌面斷點。

Responsive布局技巧

通過上面的介紹，大家對響應式設計有了一定的了解，但在實際制作中還是有一些布局技巧的：

在Responsive布局中，可以毫無保留的丟棄：

第一，?盡量少用無關緊要的div；

第二，不要使用內聯元素（inline）；

第三，盡量少用JS或flash；

第四，丟棄沒用的絕對定位和浮動樣式；

第五，摒棄任何冗余結構和不使用100%設置。

有舍才有得，丟棄了一些對Responsive有影響的東東，那么有哪些東東能幫助Responsive確定更好的布局呢？

第一，使用HTML5 Doctype和相關指南；

第二，重置好你的樣式（reset.css）；

第三，一個簡單的有語義的核心布局；

第四，給重要的網頁元素使用簡單的技巧，比如導航菜單之類元素。

使用這些技巧，無非是為了保持你的HTML簡單干凈，而且在你的頁面布局中的關鍵部分（元素）不要過分的依賴現代技巧來實現，比如說CSS3特效或者JS腳本。

說了這么多，怎么樣的布局或者說HTML結構才是簡單干凈的呢？這里教大家一個快速測試的方法。你首先禁掉你頁面中所有的樣式（以及與樣式相關的信息），在瀏覽器中打開，如果你的內容排列有序，方便閱讀，那么你的這個結構不會差到哪里去。

Responsive設計——meta標簽

最后還有一個不可或缺的東東，那就是meta標簽，可以說，在響應式設計中如果沒有這個meta標簽，你就是蹩腳的，響應式設計就是空談。

個meta標簽被稱為可視區域meta標簽，其使用方法如下。

在content屬性中主要包括以下屬性值，用來處理可視區域。

在實際項目中，為了讓Responsive設計在智能設備中能顯示正常，也就是瀏覽Web頁面適應屏幕的大小，顯示在屏幕上，可以通過這個可視區域的meta標簽進行重置，告訴他使用設備的寬度為視圖的寬度，也就是說禁止其默認的自適應頁面的效果，具體設置如下：

另外一點，由于Responsive設計是結合CSS3的Media Queries屬性，才能盡顯Responsive設計風格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我們一起來看看CSS3 Meida Queries在標準設備上的運用，大家可以把這些樣式加到你的樣式文件中，或者單獨創建一個名為“responsive.css”文件，并在相應的條件中寫上你的樣式，讓他適合你的設計需求。

腳本下載地址：?

media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond)<!—[if lt IE9]><scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>?<![endif]>

Responsive設計——不同設備的分辨率設置

下面我們一起來看看CSS3 Meida Queries在標準設備上的運用，大家可以把這些樣式加到你的樣式文件中，或者單獨創建一個名為“responsive.css”文件，并在相應的條件中寫上你的樣式，讓他適合你的設計需求：

1.1024px顯屏

@media screen and (max-width : 1024px) { /* 樣式寫在這里 */ }

2.800px顯屏

@media screen and (max-width : 800px) { /* 樣式寫在這里 */ }

3.640px顯屏

@media screen and (max-width : 640px) { /* 樣式寫在這*/ }

4.iPad橫板顯屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 樣式寫在這 */ }

5.iPad豎板顯屏

@media screen and (max-device-width: 768px) and (orientation: portrait) { /* 樣式寫在這 */ }

6.iPhone?和?Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 樣式寫在這 */ }

現在有關于這方面的運用也是相當的成熟，twitter的Bootstrap第二版本中就加上了這方面的運用。大家可以對比一下：

@media (max-width: 480px) { ... } ?????????????

@media (max-width: 768px) { ... } ?????????????

@media (min-width: 768px) and (max-width: 980px) { ... } ? ? ?

?@media (min-width: 1200px) { .. }

轉載于:https://www.cnblogs.com/jiangxiaobo/p/5256119.html

總結

以上是生活随笔為你收集整理的十天精通CSS3(11)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

十天

上一篇： redis在mac上的安装
下一篇： UVA12299 线段树水水水，但别乱开