響應(yīng)式web設(shè)計(jì)--媒體查詢

Salamander 發(fā)布于2019-08-02 11:00 / 1567人閱讀

摘要：媒體查詢的用法媒體查詢包含一個(gè)可選的媒體類型和，滿足規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為或。還有一個(gè)與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。

媒體查詢的用法 media 媒體查詢包含一個(gè)可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個(gè)或多個(gè)表達(dá)式，這些表達(dá)式描述了媒體特征，最終會(huì)被解析為true或false。如果媒體查詢中指定的媒體類型匹配展示文檔所使用的設(shè)備類型，并且所有的表達(dá)式的值都是true，那么該媒體查詢的結(jié)果為true.

500px-800px之間的設(shè)備 @media screen and (min-width: 500px) and (max-width: 800px) { ... }

最小寬度500 @media screen and (min-width: 500px){... }

在非打印設(shè)備下 @media not print and (max-width: 1200px)

使用方式： 實(shí)例 html：




    
    響應(yīng)式設(shè)計(jì)

    
    
    


    頭部
    
        左邊
        中間
        右邊
     
    底部

css1：

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
}

.left{
    width:100%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:100%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css2：

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
    
}

.left{
    width:30%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:70%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css3:

 .body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    background:#0f0;
    
}

.left{
    width:20%;
    height:200px;
    
}

.zhon{
    width:45%;
    height:350px;
    margin:0 20px;
    
}

.right{
    width:25%;
    height:200px;
}

運(yùn)行結(jié)果： 1、

2、

3、

總結(jié)：.媒體查詢Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設(shè)備下達(dá)到不同的渲染效果；到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支持之外，在所有現(xiàn)代瀏覽器中都可以完美支持。還有一個(gè)與眾不同的是，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中添加前綴。