您的位置：首页 > 其它

media 适屏

2015-10-04 23:02 337 查看 
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<title>@media</title>
<metaname="hugo"content=""/>
<style>
.test1,
.test2{
display:none;
}
/*本条为CSS2部分，IE8及以下只支持本条*/
@mediascreen{
body{color:#f00;}
}
/*下列为CSS3部分*/
@mediascreenand(min-width:960px)and(max-width:1024px){
body{background:#999;}
}
@mediascreenand(min-width:768px)and(max-width:960px){
.test1{display:block;}
}
@mediascreenand(min-width:468px)and(max-width:768px){
.test2{display:block;}
}
</style>
</head>
<body>
<div>Media</div>
<divclass="test1">(min-width:768px)and(max-width:960px)</div>
<divclass="test2">(min-width:468px)and(max-width:768px)</div>
</body>
</html>


如果你想在最小宽度为700像素或是横屏的手持设备上应用一组样式，你可以这样写：

@media(min-width:700px),handheldand(orientation:landscape){...}

比如monochrome
应用于彩色显示设备


操作符
not
，and
和
only可以用来
构建复杂的媒体查询。
and
操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当每个属性都为真时，这条查询的结果才为真。
not
操作符用来对一条媒体查询的结果进行取反。
only
操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。
若使用了
not
或
only
操作符，必须明确指定一个媒体类型。

你也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于
or
操作符。



<!--link元素中的CSS媒体查询-->
<linkrel="stylesheet"media="(max-width:800px)"href="example.css"/>

<!--样式表中的CSS媒体查询-->
<style>
@media(max-width:600px){
.facet_sidebar{
display:none;
}
}
</style>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航