今天小編就為大家?guī)硪黄嘘P(guān)CSS響應(yīng)式布局的媒體查詢的文章。小編覺得知識點挺完整的，為此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目做網(wǎng)站、網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元十堰鄖陽做網(wǎng)站,已為上家服務(wù),為十堰鄖陽各地企業(yè)和個人服務(wù),聯(lián)系電話:18980820575

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

一、關(guān)于meta

在使用媒體查詢之前，需要先使用 設(shè)置，來兼容移動設(shè)備的展示效果，所以首先先簡單了解一下關(guān)于html中的標(biāo)簽。

這個標(biāo)簽一般放在head標(biāo)簽里面，用于提供有關(guān)某個 HTML 元素的元信息 (meta-information)，比如描述、針對搜索引擎的關(guān)鍵詞以及刷新頻率。

針對媒體查詢時設(shè)置如下：

參數(shù)說明：

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

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

width = device-width：寬度等于當(dāng)前設(shè)備的寬度；

initial-scale：初始的縮放比例（默認(rèn)設(shè)置為1.0）；

minimum-scale：允許用戶縮放到的最小比例（默認(rèn)設(shè)置為1.0）；

maximum-scale：允許用戶縮放到的最大比例（默認(rèn)設(shè)置為1.0）；

user-scalable：用戶是否可以手動縮放（默認(rèn)設(shè)置為no，因為我們不希望用戶放大縮小頁面）。

更多關(guān)于的深入理解，可以參考：http://www.w3school.com.cn/tags/tag_meta.asp

二、媒體查詢實現(xiàn)方式

1、直接在link中判讀設(shè)備的尺寸，然后引用不同的外部css文件。例如：

當(dāng)屏幕大于400px的時候就引用media_1.css這個外部的css樣式文件。

2、在設(shè)置css樣式的時候，直接在后面跟著設(shè)置@media。例如：

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

這是使用CSS3實現(xiàn)的媒體查詢，其實媒體查詢實質(zhì)上就是一種樣式的覆蓋。

三、CSS3 媒體查詢

1、基本語法

@media  媒體類型  關(guān)鍵字 and (媒體功能) {
        /* CSS 樣式 */
    }

2、關(guān)鍵字

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

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

關(guān)鍵字的使用很多時候是用來對那些不支持媒體特性但卻支持媒體類型的設(shè)備

3、媒體類型

媒體類型描述設(shè)備的一般類別，除非使用not或only關(guān)鍵字，否則媒體類型是可選的，并且將隱含使用all類型。

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

4、常用媒體功能

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

height 定義輸出設(shè)備中的頁面可見區(qū)域高度。

width 定義輸出設(shè)備中的頁面可見區(qū)域?qū)挾取?/p>

max-height 定義輸出設(shè)備中的頁面最大可見區(qū)域高度。

max-width 定義輸出設(shè)備中的頁面最大可見區(qū)域?qū)挾取?/p>

min-height 定義輸出設(shè)備中的頁面最小可見區(qū)域高度。

min-width 定義輸出設(shè)備中的頁面最小可見區(qū)域?qū)挾取?/p>

device-height 定義輸出設(shè)備的屏幕可見高度。

device-width 定義輸出設(shè)備的屏幕可見寬度。

max-device-height 定義輸出設(shè)備的屏幕可見的最大高度。

max-device-width 定義輸出設(shè)備的屏幕最大可見寬度。

orientation 檢測設(shè)備目前處于橫向還是縱向狀態(tài)。

四、針對實際比較常見的尺寸設(shè)置

以下僅僅列舉了部分常見的屏幕尺寸，但是也實現(xiàn)大于、小于、等于的設(shè)置。

    /* 屏幕尺寸大于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){ }
    /*  當(dāng)設(shè)備可視寬度小于480px (iphone)*/
    @media only screen and (max-device-width:480px){ }
    /* 當(dāng)設(shè)備可視寬度等于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的樣式覆蓋問題，所以在實際設(shè)置的時候，如果同一個元素需要設(shè)置幾個不同尺寸的問題，就需要注意一下順序問題，比如：min-width時，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面。

以上就是CSS響應(yīng)式布局的媒體查詢的知識匯總，內(nèi)容較為全面，小編相信有部分知識點可能是我們?nèi)粘９ぷ骺赡軙姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。