CSS3自适配手机屏幕

浏览数：31 / 时间：2015年06月11日 
<!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

CSS3自适配手机屏幕[转],,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢