画像に「ポラロイド」効果を使用しようとしていますが、デスクトップ画面ではフル サイズ (約 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