码迷,mamicode.com
首页 > 其他好文 > 详细

media 适屏

时间:2015-10-04 23:35:03      阅读:291      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@media</title>
<meta name="hugo" content="" />
<style>
.test1,
.test2 {
    display: none;
}
/* 本条为CSS2部分,IE8及以下只支持本条 */
@media screen {
    body{ color: #f00; }
}
/* 下列为CSS3部分 */
@media screen and (min-width: 960px) and (max-width: 1024px){
    body{ background: #999; }
}
@media screen and (min-width: 768px) and (max-width: 960px) {
    .test1 { display: block; }
}
@media screen and (min-width: 468px) and (max-width: 768px) {
    .test2 { display: block; }
}
</style>
</head>
<body>
<div>Media</div>
<div class="test1">(min-width: 768px) and (max-width: 960px)</div>
<div class="test2">(min-width: 468px) and (max-width: 768px)</div>
</body>
</html>
            

 

media 适屏

标签:

原文地址:http://www.cnblogs.com/hgonlywj/p/4855159.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!