CSS3 Media Queries 詳細介紹與使用方法

時間 2019-12-11

標籤 css3 css media queries 詳細介紹使用方法欄目 CSS 简体版

原文原文鏈接

Media Queries 就是要在支援CSS3 的瀏覽器中才能正常工做，IE8 如下不支持。而Media Queries 的套用方法變幻無窮，要套用在什麼樣的裝置中，均可以本身來定義。css

到底什麼是Media Queries ？通常咱們在開發HTML + CSS 網頁中，都會有一份CSS 來控制網頁的樣式表。而隨着各式各樣不一樣大小、長寬與解析度的裝置的興起，咱們在開發網頁只考慮到本身的螢幕顯示的如何，是多麼的膚淺哪。 So，在開發者的螢幕看到的網頁或許很漂亮，那，其餘人的螢幕呢？因此，咱們須要的是可以控制不一樣大小的螢幕（裝置），在其上所顯示出來的樣式，讓各式各樣來自不一樣地方的User 都可以有最佳的瀏覽體驗。html

在國外有一個網站專門蒐集各式各樣的Media Queries效果，網站名稱就叫作「 Media Queries 」，網址：http://mediaqueri.es/ 。進到該網站以後，你會看到每一列都有4 張網站的截圖，從左開始是螢幕寬度較小的行動裝置，一直到右邊則是在傳統PC 的較大螢幕上。而在傳統PC 中，會將許多元素並排；在手機中，會變成只有一行。css3

Media Queries 其實說簡單也很簡單，你能夠只使用下面的幾行CSS，再針對不一樣裝置去設CSS 屬性就行了。這個段落將由淺入深，從最簡單、最Easy、最沒挑戰性的使用寬度來玩。bootstrap

Media Queries 有兩種使用方法

在同一個CSS 檔案中，用Media Queries @media 來判斷使用者之螢幕寬度，選擇載入哪一段CSS。
在HTML 的<link> 載入的地方，用media 屬性判斷使用者之裝置/ 視窗寬度，選擇載入哪個CSS 檔案。

以上兩種則一便可，使用第一種的話要寫好幾遍<link> 標籤，另外一種要在同一個CSS 檔案中寫好幾遍@media。效果相同，選擇本身喜歡的方式便可。（網路上的Framework 都是第1種，如Bootstrap。）瀏覽器

@media 用寬度( width ) 判斷

下面的語法，是最經常使用到的Media Queries：（下方爲同一檔案以內容）iphone

@media screen and (min-width: 1200px) {
    // 若是視窗寬度 >= 1200px，將會加載此 CSS。
}
@media screen and (min-width: 768px) and (max-width: 979px) {
    // 若是視窗寬度介於 768px ~ 979px，將會載入此 CSS。
}
@media screen and (max-width: 767px) {
    // 若是視窗寬度 <= 768px，將會載入此 CSS。
}
@media screen and (max-device-width: 480px) {
    // 若視窗寬度 <= 480px，則載入此CSS。
}

在Media Queries 中，咱們最常使用min-width 和max-width 來判斷使用者的視窗寬度，而max-device-width 則是使用者「裝置」的最大寬度。 width 和device-width 差在哪裏？網站

width : 由於瀏覽器能夠自由調整寬度，因此這邊指的是該瀏覽視窗的寬度。
device-width : 就算你把瀏覽器視窗弄到符合最大(小)寬度，仍是不會生效。由於，device-width 指的是使用者的「裝置」最大寬度，而不是瀏覽器視窗。因此，device-width 經常使用在判斷手機上。

因此，你也能夠本身加上其餘的條件下去。要注意的是，每個條件之間請用and 來分隔，並要適時加上括號以避免錯誤。spa

min-width 是最小寬度；max-width 是最大寬度，能夠用來表示必定的範圍。code

<link> 寫在HTML 裏頭的判斷

上一節的語法，你也能夠把它個別拆成好幾個檔案，而後用HTML 的<link> 來載入而且判斷。下面爲HTML 代碼：htm

<link rel=」stylesheet」 type=」text/css」 href=」all.css」 media=」screen」>
<link rel=」stylesheet」 type=」text/css」 href=」a.css」 media=」screen and (max-width: 767px)」>
<link rel=」stylesheet」 type=」text/css」 href=」b.css」 media=」screen and (min-width: 768px) and (max-width: 979px)」>
<link rel=」stylesheet」 type=」text/css」 href=」c.css」 media=」screen and (min-width: 1200px)」>
<link rel=」stylesheet」 type=」text/css」 href=」d.css」 media=」screen and (max-device-width: 480px)」>

咱們就能夠用link 中的media 屬性來判斷使用者的視窗/ 裝置寬度，如上。以後，在每個css 檔案中你就能夠寫若使用者寬度符合條件的CSS 。如a.css 中，就是要寫若是使用者之視窗寬度<= 768px，要再載入的CSS。

注意事項

在Media Queries 中的CSS，其效果是覆蓋本來預設的CSS。因此，你要先有一份完整的CSS，再使用Medai Queries，對細部元素作調整。因此，絕對不是把所有的CSS 複製一遍到Media Queries 中再修改喔！

Viewport

若是網頁沒有作Responsive Web Design 的話，手機的瀏覽器會自動僞裝解析度變很大，會讓網頁完整顯示。可是，這就讓字變得很小，使用者還要去作放大而不能直接閱讀。而這個meta 標籤是爲了防止這樣的情形發生( iphone 聽說會有此情形)，讓網頁顯示的寬度就直接是裝置的寬度，不會把網頁硬塞。這段只要加在HTML 的<head> 裏頭便可。

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

針對某裝置下去作設定、快速使用: Media Query Snippets

Media Query Snippets這個網站蒐集了不少行動裝置的@media條件式，你能夠直接複製來使用。以下圖，有一堆的裝置你能夠拿去設定：（網址： http://nmsdvid.com/snippets/ ）

另外，其實你不太須要去對每一個裝置都去作調整，基本上使用行動裝置的max-device-width: 480px ，就綽綽有餘了。上面的網站，是幫你作個整理，以便不時之需。

IE8 Hack

目前在網路上有人制做了讓不支援Media Queries 的瀏覽器透過Javascript 的方式也能支援。而目前這個彷佛仍是有點小問題，實際能不能使用請直接至該網站查詢：

css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers

動手吧

另外，目前網路上也有支援Media Queries 的Framework，如Bootstrap 等等。 Bootstrap 已經幫你把不少版面在不一樣裝置的顯示效果設定好，或許你也能夠試試看使用這個不錯又簡單的Framework，Bootstrap 。若是你使用了Bootstrap，仍是不表明這篇對你沒有須要，由於像Bootstrap只有對格局、圖片作變更，而細節的部份，你仍是得使用media queries，才能把整個Responsive Web Design作到最好。

事實上，Media Queries 只是讓你可以在不一樣裝置上作調整，至於調整的好看很差看，就得看你們的CSS 造化如何了，加油！