我正在尝试在图像上使用“宝丽来”效果，但我希望在桌面屏幕上具有全尺寸（约 200 像素），但在移动设备上查看时使其缩放，例如 50%。
为了实现这一点，我想我必须使用@media 查询对吗？我从来没有使用过媒体查询，所以我需要一些帮助。如果没有，谁能指出我可以在没有javascript的情况下完成这项工作的方法？
我有以下代码：
HTML：
<section id="splash">
<header>Celso Santos</header>
<div class="container">
<div id="polaroid">
<figure>
<img src="img/zedblade.jpg" alt="Celso Santos" />
<figcaption>Geek</figcaption>
</figure>
</div>
</div>
</section>
和CSS：
/***Position the figures containing the images and captions***/
#polaroid figure {
/*float: left;*/ /*places the images in a horizontal line*/
position: relative; /*allows precise positioning of the tape in step 5- see support section below for more info*/
width: 178px; /*width of the images*/
/*margin: 0 auto; /*space between the images*/
}
#polaroid figure {
padding: 6px 8px 10px 8px; /*size of the frame*/
/*give the frame's background colour a gradient*/
background: #eee6d8; /*fallback colour for browsers that don't support gradients*/
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
/*give the Polaroids a small drop shadow*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figcaption {
text-align: center;
font-family: 'Reenie Beanie', cursive; /* Reenie Beanie is available through Google Webfonts */
font-size:1.3em;
color: #454f40;
letter-spacing: 0.09em;
}
figure:before { /*see the support section below to more info on using the :before psuedo element*/
content: '';
display: block;
position: absolute;
left:5px; /*postion from the left side of the frame (positive value move the tape right, negative moves it left)*/
top: -15px; /*position from the top of the frame (positive move it above the frame, negative below)*/
width: 75px; /*width of the tape*/
height: 25px; /*height of the tape*/
background-color: rgba(222,220,198,0.7); /*colour of the tape, use rgba to make it slightly transparent*/
/*rotate the tape 12 degrees anti-clockwise*/
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
/**The tape for the even numbered images needs to be rotated the opposite way, as the images are, and positioned on the other side of the frame, I've also changed the width slightly**/
figure:nth-child(even):before {
left:150px;
top: -15px;
width: 55px;
height: 25px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
为简化起见，我添加了一个指向我的公共保管箱文件夹的链接，并带有“实时”预览：https ://dl.dropbox.com/u/3543277/www/index.html