CSS3自适配手机屏幕[转]

时间 2019-11-25 标签 css3 css 3 适配手机屏幕转

<!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自适配手机屏幕css

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