CSS響應式布局的媒體查詢介紹

今天小編就為大家帶來一篇有關CSS響應式布局的媒體查詢的文章。小編覺得知識點挺完整的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

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

一、關于meta

在使用媒體查詢之前，需要先使用<meta> 設置，來兼容移動設備的展示效果，所以首先先簡單了解一下關于html中的<metal>標簽。

<meta>這個標簽一般放在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，因為我們不希望用戶放大縮小頁面）。

更多關于<meta>的深入理解，可以參考：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類型。

所有瀏覽器都支持值為 “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響應式布局的媒體查詢的知識匯總，內容較為全面，小編相信有部分知識點可能是我們日常工作可能會見到或用到的。希望你能通過這篇文章學到更多知識。