CSS3自适配手机屏幕[转] 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title>Media Query Demos【CSS3自适配手机屏幕】</title>
<style type="text/css">
.wrapper {
 border: solid 1px #666; 
 padding: 5px 10px;
 margin: 40px;
}

.viewing-area span {
 color: #666;
 display: none;
}

/* max-width */
@media screen and (max-width: 600px) {
 .one {
  background: #F9C;
 }
 span.lt600 {
  display: inline-block;
 }
}

/* min-width */
@media screen and (min-width: 900px) {
 .two {
  background: #F90;
 }
 span.gt900 {
  display: inline-block;
 }
}

/* min-width & max-width */
@media screen and (min-width: 600px) and (max-width: 900px) {
 .three {
  background: #9CF;
 }
 span.bt600-900 {
  display: inline-block;
 }
}

/* max device width */
@media screen and (max-device-width: 480px) {
 .iphone {
  background: #ccc;
 }
}
</style>
</head>

<body>
 <div class="wrapper one">此框会变成粉红色，如果可视面积小于600px</div>
 <div class="wrapper two">此框会变成橙色，如果可视面积小于900px</div>
 <div class="wrapper three">此框会变成蓝色，如果可视面积为600px~900px</div> 
</body>
</html>

CSS3自适配手机屏幕

http://hi.baidu.com/58zhongguo/item/c4da7bd761d22bc71a72b4d0?qq-pf-to=pcqq.c2c

posted @ 2014-05-07 12:26  Merlin-magic  阅读(4421)  评论(0)  编辑  收藏  举报