CSS3---媒體查詢與響應式佈局

時間 2019-12-19

標籤 css3 css 媒體查詢響應佈局欄目 CSS 简体版

原文原文鏈接

1.css

值android	設備類型web
All瀏覽器	全部設備app
Brailleiphone	盲人用點字法觸覺回饋設備佈局
Embossed網站	盲文打印機url
Handheldspa	便攜設備
Print	打印用紙或打印預覽視圖
Projection	各類投影設備
Screen	電腦顯示器
Speech	語音或音頻合成器
Tv	電視機類型設備
Tty	使用固定密度字母柵格的媒介，好比電傳打字機和終端

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

2.媒體類型的引用方法也有多種，常見的有：link標籤、@import和CSS3新增的@media幾種：

　　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" />

　　@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>

3.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」。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代碼指的是「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屬性同樣在不一樣的瀏覽器中添加前綴。

4. 什麼是響應式設計呢？維基百科是這樣對響應式做的描述：「Responsive設計簡單的稱爲RWD，是精心提供各類設備都能瀏覽網頁的一種設計方法，RWD能讓你的網頁在不一樣的設備中展示不一樣的設計風格。」從這一點描述來講，RWD不是流體佈局，也不是網格佈局，而是一種獨特的網頁設計方法。　

1.流體網格

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

2.彈性圖片

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

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

爲每個斷點提供不一樣的圖片，這是一個比較頭痛的事情，由於Media Queries並不能改變圖片「src」的屬性值，那有沒有辦分法能夠解決呢？能夠參考一下下面的解決方法。使用background-image給元素使用背景圖片，顯示/隱藏父元素，給父元素使用不一樣的圖片，而後經過Media Queries來控制這些圖片顯示或隱藏。

3.媒體查詢

　　Responsive設計最關注的就是：根據用戶的使用設備的當前寬度，你的Web頁面將加載一個備用的樣式，實現特定的頁面風格。

4.屏幕分辨率

屏幕分辨簡單點說就是用戶顯示器的分辨率，深一點說，屏幕分辨率指的是用戶使用的設備瀏覽您的Web頁面時的顯示屏幕的分辨率，好比說智能手機瀏覽器、移動電腦瀏覽器、平板電腦瀏覽器和桌面瀏覽器的分辨率。Responsive設計利用Media Queries屬性針對瀏覽器使用的分辨率來適配對應的CSS樣式。

5.主要斷點

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

5. 響應式佈局（Responsive Web design）指的是在網頁開發過程當中針對不一樣設備開發一套網站，而後根據用戶行爲以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)自適應地顯示不一樣佈局。

響應式佈局的核心是媒體查詢。媒體查詢（ Media Query ）是獲取用戶行爲和設備環境、而後提供相應的CSS規則的過程的簡稱。

媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。
Responsive佈局技巧

在Responsive佈局中，能夠毫無保留的丟棄：

　　第一，儘可能少用可有可無的div；

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

　　第三，儘可能少用JS或flash；

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

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

有舍纔有得，丟棄了一些對Responsive有影響的東東，那麼有哪些東東能幫助Responsive肯定更好的佈局呢？

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

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

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

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

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

6.Responsive設計——meta標籤

<meta name=」viewport」 content=」」 />

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

<meta name=」viewport」 content=」width=device-width,initial-scale=1.0」 />

另一點，Responsive設計是結合CSS3的Media Queries屬性，才能盡顯Responsive設計風格.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。