什么是媒体查询

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有：width、height和color（等）。使用媒体查询可以在不改变页面内容的情况下，为特性的一些输出设备定制显示效果。

媒体查询语法

CSS3中的媒体查询：根据浏览器窗口大小的改变，页面颜色就会改变。

<!DOCTYPE html>
<html\>
<head>
<title>无标题文档</title>
</head>
<style>
body{
    background-color:#0033FF;
}
@media screen and (max-width: 960px){
    body{
    background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
    background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
    background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
    background-color:#FFFF00;
    }
}
</style>
<body>
<p>my  first @media</p>
</body>
</html>

 

　　CSS2中media:通过<link>标签的media属性为样式表指定设备类型：

<link rel="stylesheet"  media="screen"  href="portrait-screen.css"/>

 

　　媒体查询则能使我们根据设备的各种功能特性来设定响应的样式，而不仅仅只针对设备类型，在媒体查询的开头追加not会颠倒该查询的逻辑：

<link rel+"stylesheet" media="screen and (orientation: portrait)" href="portrait-screen.css"/>
//设置了媒体类型和媒体特性（显示屏， 纵向放置）


<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait-
screen.css" />
//非纵向放置的显示屏

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px)" href="800wide-portrait-screen.css" />
//限制只有视口宽度大于800px像素的显示屏设备才能加载此文件

 

　　媒体查询列表（需要用逗号隔开）：

<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width:800px), projection" href="800wide-portrait-screen.css" />

 

除了以上方法还可以使用CSS中的@import指令在当前样式表中按条件引入其他样式表。（使用@import方法会增加HTTP请求影响加载速度）

@import url("phone.css") screen and (max-width:360px);

 

 

媒体查询可以检测的特性：

css 媒体查询可以识别ios么 css3媒体查询_css 媒体查询可以识别ios么

一个例子：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>无标题文档</title>
</head>
<style>
@media (max-width:5000px)
{
    body{
        margin:0 auto;
        width:1000Px;
    }

    .left{
        float:left;
        width:450px;
        height:1200px;
        margin-left:25px;
        margin-right:25px;
        background-color:#99FFCC;
    }
        
    .right{
        float:right;
        width:450px;
        height:1200px;
        margin-left:25px;
        margin-right:25px;
        background-color:#FFFF99;
    }
    .rtop{
        width:450px;
        height:150px;
        background-color:#CCFFFF;
        padding:0;
        position:absolute;
        left:auto;
        top:250px;
        font-size:14px;
        line-height:21px;
        text-align:center;
        overflow:hidden;
    }
        
        
    .rcenter{
        width:450px;
        height:150px;
        background-color:#CCFFFF;
        position:absolute;ss
        left:auto;
        top:650px;
        text-align:center;
        overflow:hidden;
    }
        
        
    .rbottom{
        width:450px;
        height:150px;
        background-color:#CCFFFF;
        padding:0;
        position:absolute;
        left:auto;
        top:1050px;
        font-size:20px;
        line-height:30px;
        text-align:center;
        overflow:hidden;
    }


}

@media screen and(min-width:750px) and (max-width:1000px)
{
    body{
        margin:0 auto;
        width:750Px;
    }

    .left{    
        float:left;
        width:350px;
        height:900px;
        margin-right:25px;
        background-color:#99FFCC;
    }
        
    .right{
        float:right;
        width:350px;
        height:900px;
        margin-left:25px;
        background-color:#FFFF99;
    }
    .rtop{
        width:350px;
        height:100px;
        background-color:#CCFFFF;
        padding:0;
        position:absolute;
        left:auto;
        top:200px;
        font-size:14px;
        line-height:21px;
        text-align:center;
        overflow:hidden;
    }
        
        
    .rcenter{
        width:350px;
        height:100px;
        background-color:#CCFFFF;
        position:absolute;
        left:auto;
        top:500px;
        text-align:center;
        overflow:hidden;
    }
        
        
    .rbottom{
        width:350px;
        height:100px;
        background-color:#CCFFFF;
        position:absolute;
        left:auto;
        top:800px;
        font-size:20px;
        line-height:30px;
        text-align:center;
        overflow:hidden;
    }
}

@media screen and (min-width: 320px) and (max-width: 750px)
{
    body{
        margin:0 auto;
        width:320Px;
    }

    .left{
        margin:0 auto;
        width:320px;
        height:300px;
        background-color:#99FFCC;
    }
        
    .right{
        margin:0 auto;
        width:320px;
        height:900px;
        background-color:#FFFF99;
    }
    .rtop{
        width:320px;
        height:100px;
        background-color:#CCFFFF;
        padding:0;
        position:absolute;
        left:auto;
        top:500px;
        font-size:14px;
        line-height:21px;
        text-align:center;
        overflow:hidden;
    }
        
        
    .rcenter{
        width:320px;
        height:100px;
        background-color:#CCFFFF;
        position:absolute;
        left:auto;
        top:800px;
        text-align:center;
        overflow:hidden;
    }
        
        
    .rbottom{
        width:320px;
        height:100px;
        background-color:#CCFFFF;
        position:absolute;
        left:auto;
        top:1100px;
        font-size:20px;
        line-height:30px;
        text-align:center;
        overflow:hidden;
    }
}

</style>




<body>
    <div class="left">
    
    </div>
    
    
    <div class="right">
        <div class="rtop">
        <p>这是第一段文字这是第一段文字这是第一段文字
        这是第一段文字这是第一段文字这是第一段文字
        这是第一段文字这是第一段文字这是第一段文字
        这是第一段文字这是第一段文字这是第一段文字</p>
        </div>
        
        <div class="rcenter">
        <p>这是第二段文字这是第二段文字这是第二段文字
        这是第二段文字这是第二段文字这是第二段文字
        这是第二段文字这是第二段文字这是第二段文字
        这是第二段文字这是第二段文字这是第二段文字</p>
        </div>
        
        <div class="rbottom">
        <p>这是第三段文字这是第三段文字这是第三段文字
        这是第三段文字这是第三段文字这是第三段文字
        这是第三段文字这是第三段文字这是第三段文字
        这是第三段文字这是第三段文字这是第三段文字</p>
        </div>
    
    </div>


</body>
</html>