響應式web設計--媒體查詢

時間 2019-12-07

標籤響應 web 設計媒體查詢欄目 HTML 简体版

原文原文鏈接

媒體查詢的用法

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：

<!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>
    <div class="top">頭部</div>
    <div class="zhong">
        <div class="left">左邊</div>
        <div class="zhon">中間</div>
        <div class="right">右邊</div>
     </div>
    <div class="xia">底部</div>
</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;
}