360SDN.COM

css3@media规则

来源:  2018-09-21 17:15:55    评论:0点击:

可以在不改变html内容情况下,根据媒体设备不同,浏览器窗口尺寸不同使用不同的css样式。 @media 设备类型 and(设备特性){ //css代码 } 例如:(根据窗口大小不同使用不同大小的字体)  

//窗口宽度大于900px 
 
@media screen and(min-width:900px)
 { body{ font-size:25px; } } 
 //窗口宽度大于500px小于900px 
 @media screen and(min-width:500px)and(max-width:900px)
 { body{ font-size:20px; } } 
 //窗口宽度小于500px @media screen and(max-width:500px) 
 
 { body{ font-size:15px; } }
 
//窗口宽度大于900px 

@media screen and(min-width:900px)
 { body{ font-size:25px; } } 
 //窗口宽度大于500px小于900px 
 @media screen and(min-width:500px)and(max-width:900px)
 { body{ font-size:20px; } } 
 //窗口宽度小于500px @media screen and(max-width:500px) 
 
 { body{ font-size:15px; } }
 
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权