明輝手游網中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

對響應式web設計的方法完成

發(fā)表時間：2023-09-06 來源：明輝站整理相關軟件相關文章人氣：

[摘要]這篇文章分享給大家的內容是關于響應式web設計的方法實現，內容很有參考價值，希望可以幫到有需要的小伙伴。媒體查詢的用法media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如果媒體查詢中指定的媒體...
這篇文章分享給大家的內容是關于響應式web設計的方法實現，內容很有參考價值，希望可以幫到有需要的小伙伴。

媒體查詢的用法

media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規(guī)范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為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)

使用方式：

3857564536-5b55722337161_articlex.png

實例

html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>響應式設計</title>

    <link rel="stylesheet" type="text/css" href="day01.css" media="screen and (min-width:1024px)"/>
    <link rel="stylesheet" type="text/css" href="day02.css" media="screen and (max-width:1024px) and (min-width:600px)"/>
    <link rel="stylesheet" type="text/css" href="day03.css" media="screen and (max-width:600px)"/>
</head>
<body>
    <p class="top">頭部</p>
    <p class="zhong">
        <p class="left">左邊</p>
        <p class="zhon">中間</p>
        <p class="right">右邊</p>
     </p>
    <p class="xia">底部</p>
</body>
</html>

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、

4195440276-5b55754b86fa3_articlex.png

2、

3984556589-5b55755d48e35_articlex.gif

3、

262877225-5b5575dea96e2_articlex.gif

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

相關推薦：

關于css響應式的實現代碼及效果

CSS實現響應式布局的方法

以上就是對響應式web設計的方法實現的詳細內容，更多請關注php中文網其它相關文章！


網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。