首页 > 其他 > 详细

屏幕自适应

时间:2017-06-24 19:17:41      阅读:273      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画面自适应</title>

<link rel="stylesheet" href="css/pic480.css" media="(max-width:480px)">
<link rel="stylesheet" href="css/pic800.css" media="(min-width:480px) and (max-width:800px)">
<link rel="stylesheet" href="css/pic800+.css" media="(min-width:800px) and (max-width:1200px)">
<link rel="stylesheet" href="css/pic1200.css" media="(min-width:1200px)">
<style>
.pic{
text-align: center;
width: 100%;
overflow: hidden;
}
.pic>div>img{
padding: 1px;
}
.pic>div>img:hover{
border: 1px solid grey;
padding: 0;
}
</style>

</head>
<body>
<p>

</p>
<div class="pic">
<div>
<img src="css响应式效果/images/pic6.jpg" alt="加载失败">
<div>时尚风格</div>
</div>
<div>
<img src="css响应式效果/images/pic7.jpg" alt="加载失败">
<div>风格时尚</div>
</div>
<div>
<img src="css响应式效果/images/pic8.jpg" alt="加载失败">
<div>时尚风格</div>
</div>
<div>
<img src="css响应式效果/images/pic9.jpg" alt="加载失败">
<div>风格时尚</div>
</div>
<div>
<img src="css响应式效果/images/pic10.jpg" alt="加载失败">
<div>时尚风格</div>
</div>
<div>
<img src="css响应式效果/images/pic11.jpg" alt="加载失败">
<div>风格时尚</div>
</div>
<div>
<img src="css响应式效果/images/pic12.jpg" alt="加载失败">
<div>时尚风格</div>
</div>
<div>
<img src="css响应式效果/images/pic13.jpg" alt="加载失败">
<div>风格时尚</div>
</div>
</div>
</body>
</html>

屏幕自适应

原文:http://www.cnblogs.com/shujie/p/7074006.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!