-1
我正试图让我的照片库适合移动窗口。我在响应/移动方面的大部分经验来自twitter bootstrap，它为您做了一切。如何使这个图片库对移动设备敏感？
这里是的jsfiddle（按钮不起作用，因为我并没有包括我的javascript）：http://jsfiddle.net/L9hued7b/2/
HTML：
<body>
<div id="wrapper">
<div id="prev">
<a href="#" class="images">⇑ </a>
<a href="#" class="thumbs">⇑ </a>
</div>
<div id="images">
<!-- large images on left-->
</div>
<div id="thumbs">
<!--thumbnails on right-->
</div>
<div id="next">
<a href="#" class="images">⇓ </a>
<a href="#" class="thumbs">⇓ </a>
</div>
</div>
</body>
CSS：
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
min-height: 600px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
border: 1px solid #ddd;
background-color: #fff;
width: 750px;
height: 350px;
padding: 50px 25px 50px 50px;
margin: -225px 0 0 -412px;
position: absolute;
top: 50%;
left: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
#wrapper img {
display: block;
float: left;
}
#images, #thumbs {
height: 350px;
float: left;
overflow: hidden;
}
#images {
width: 350px;
}
#thumbs {
width: 375px;
margin-left: 25px;
}
#thumbs img {
border: 1px solid #ccc;
padding: 14px;
margin: 0 25px 25px 0;
cursor: pointer;
}
#thumbs img.selected, #thumbs img:hover {
border-color: #333;
}
#thumbs div {
width: 375px;
height: 350px;
float: left;
}
#prev a, #next a {
text-decoration: none;
font-size: 20px;
color: #999;
position: absolute;
}
#prev a:hover, #next a:hover {
color: #000;
}
#prev a.disabled, #next a.disabled {
display: none !important;
}
#prev a {
top: 15px;
}
#next a {
bottom: 15px;
}
a.images {
left: 220px;
}
a.thumbs {
right: 220px;
}
#source {
text-align: center;
width: 400px;
margin: 0 0 0 -200px;
position: absolute;
bottom: 10px;
left: 50%;
}
#source, #source a {
color: #999;
font-size: 12px;
}