1
我試圖在圖像上使用「寶麗來」效果，但我希望在桌面屏幕上顯示完整大小（大約200像素），但在移動設備上查看時會縮放（例如50％）設備。如何根據屏幕調整div與圖像的大小？
爲了達到這個目的，我想我必須使用@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);
}
爲了簡化起見，我添加了一個鏈接到我的公共收存箱文件夾「live」預覽：https://dl.dropbox.com/u/3543277/www/index.html