對響應式web設計的方法實現

這篇文章分享給大家的內容是關於響應式web設計的方法實現，內容很有參考價值，希望可以幫到有需要的小夥伴。

媒體查詢的用法

media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規範的條件下，包含零個或多個表達式，這些表達式描述了媒體特徵，最終會被解析為true或false。如果媒體查詢中指定的媒體類型符合顯示文件所使用的裝置類型，且所有的表達式的值都是true，那麼該媒體查詢的結果為true.

• #500px -800px之間的裝置@media screen and (min-width: 500px) and (max-width: 800px) { ... }

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

• 在非列印裝置下@media not print and (max-width: 1200px)

#使用方式：

#實例

html：

nbsp;html>


    <meta>
    <title>响应式设计</title>

    <link>
    <link>
    <link>


    <p>头部</p>
    <p>
        </p><p>左边</p>
        <p>中间</p>
        <p>右边</p>
     
    <p>底部</p>

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;
}

運行結果：

1、

##2、

3、

### ###總結：.媒體查詢Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果；到目前為止，CSS3 Media Queries得到了眾多瀏覽器支持，除了IE6-8瀏覽器不支援之外，在所有現代瀏覽器中都可以完美支援。還有一個與眾不同的是，Media Queries在其他瀏覽器中不要像其他CSS3屬性一樣在不同的瀏覽器中加上前綴。 ######相關推薦：#########關於css響應式的實作程式碼及效果###############CSS實作響應式佈局的方法# ###########

以上是對響應式web設計的方法實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！