CSS響應式佈局之媒體查詢

在實際專案中，總是會遇到響應式佈局的問題，如果未曾使用一些響應式UI框架的話，那麼一般就會用媒體查詢來實現響應式佈局，由於遇到的實在太頻繁了，所以我覺得還是有必要稍微進行一下總結的。

首先我們需要了解的一點是，使用媒體查詢這種方式，當重置瀏覽器大小的過程中，頁面就會根據瀏覽器的寬度和高度重新渲染頁面。

一、關於meta

在使用媒體查詢之前，需要先使用 設置，來相容於行動裝置的展示效果，所以首先先簡單了解一下關於html中的標籤。

這個標籤一般放在head標籤裡面，用於提供有關某個 HTML 元素的元資訊 (meta-information)，例如描述、針對搜尋引擎的關鍵字以及刷新頻率。

針對媒體查詢時設定如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

參數說明：

#1、name 屬性提供了名稱/值對中的名稱。 name="viewport"表示是視窗的設置，除了viewport還有。

2、content 屬性提供了名稱/值對中的值，該值可以是任何有效的字串，且content基於內容，始終要和http-equiv 或name 屬性一起使用，為他們提供了與其相關的值的定義。 content的值說明：

width = device-width：寬度等於目前裝置的寬度；

initial-scale：初始的縮放比例（預設為1.0）；

minimum-scale：允許使用者縮放到的最小比例（預設為1.0）；

maximum-scale：允許使用者縮放到的最大比例（預設為1.0）；

user -scalable：使用者是否可以手動縮放（預設為no，因為我們不希望使用者放大縮小頁面）。

更多關於的深入理解，可以參考：http://www.w3school.com.cn/tags/tag_meta.asp

#二、媒體查詢實作方式

1、直接在link中判讀裝置的尺寸，然後引用不同的外部css檔案。例如：

<link type="text/css" href="media_1.css" media="screen and (min-width: px)">

當螢幕大於400px的時候就引用media_1.css這個外部的css樣式檔。

2、設定css樣式的時候，直接跟著設定@media。例如：

.div1{
    width: 400px;
    height: 400px;
}
/*当屏幕大于1440px的彩色屏幕样式*/
@media screen and (min-width: 1440px){
    .div1{
        width: 800px;
        height:800px;
    }
}

這是使用CSS3實現的媒體查詢，其實媒體查詢實質上就是一種樣式的覆蓋。

三、CSS3 媒體查詢

1、基本語法

@media  媒体类型  关键字 and (媒体功能) {
        /* CSS 样式 */
    }

2、關鍵字

only：指定某種指定的媒體類型，可用來排除不支援媒體查詢的瀏覽器。

not：排除某種指定的媒體類型。

關鍵字的使用很多時候是用來對那些不支援媒體特性但卻支援媒體類型的裝置

3、媒體類型

媒體類型描述裝置的一般類別，除非使用not或only關鍵字，否則媒體類型是可選的，並且將隱含使用all類型。

值	描述
#all	用於所有多媒體類型裝置
print	用於印表機
screen	用於電腦螢幕，平板，智慧型手機等。
speech	用於螢幕閱讀器

#所有瀏覽器都支援值為「screen」、 ”print” 以及“all” 的media 屬性。

4、常用媒體功能

以下僅列舉了一些可能稍微常用的媒體功能：

height 定義輸出裝置中的頁面可見區域高度。

width 定義輸出裝置中的頁面可見區域寬度。

max-height 定義輸出裝置中的頁面最大可見區域高度。

max-width 定義輸出裝置中的頁面最大可見區域寬度。

min-height 定義輸出裝置中的頁面最小可見區域高度。

min-width 定義輸出裝置中的頁面最小可見區域寬度。

device-height 定義輸出裝置的螢幕可見高度。 

device-width 定義輸出裝置的螢幕可見寬度。

max-device-height 定義輸出裝置的螢幕可見的最大高度。 

max-device-width 定義輸出裝置的螢幕最大可見寬度。 

orientation 偵測設備目前處於橫向或縱向狀態。

四、針對實際比較常見的尺寸設定

以下僅列舉了部分常見的螢幕尺寸，但是也實現大於、小於、等於的設定。

    /* 屏幕尺寸大于960px时（普通彩色屏幕） */
    @media only screen and (min-width:960px){ }
    /* 屏幕尺寸小于1440px时 */
    @media only screen and (max-width:1440px){ }
    /* 屏幕尺寸大于960px而小于1920px */
    @media only screen  (min-width: 960px) and (max-width: 1920px){ }
    /* 屏幕大于2000px时（MAC) */
    @media only screen and (min-width:2000px){ }
    /*  当设备可视宽度小于480px (iphone)*/
    @media only screen and (max-device-width:480px){ }
    /* 当设备可视宽度等于768px时 (iPad) */
    @media only screen and (device-width:768px){ }
    /* 屏幕尺寸大于481px而小于1024px (iPad 竖屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) { }
    /* 屏幕尺寸大于481px而小于1024px (iPad横屏) */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) { }

注意：由於css的樣式覆蓋問題，所以在實際設定的時候，如果同一個元素需要設定幾個不同尺寸的問題，就需要注意一下順序問題，例如：min- width時，小的放上面大的在下面，同理如果是用max-width那麼就是大的在上面，小的在下面。

推薦教學：《CSS教學》

以上是CSS響應式佈局之媒體查詢的詳細內容。更多資訊請關注PHP中文網其他相關文章！