<!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