幅 320px のスマートフォンを除くほとんどのフォーマットでうまく機能するレスポンシブ レイアウトを作成しています。CSS と別のスタイルシートの両方でメディア コンディショナルを使用しましたが、デバイスがコンディショナル コードを無視しているかのように、どちらも機能していないようです。
私の元の CSS は次のようになります (480px 以上のデバイスの場合):
#logo
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
background-image:url(../images/logorepeat.png);
background-position:0px 26px;
background-repeat:repeat-x;
z-index:50;
}
#landscape
{
position:relative;
margin-top:-27px;
margin-left:auto;
margin-right:auto;
padding-top:45px;
text-align:center;
width:100%;
height:120px;
background-image:url(../images/plated2.jpg);
background-repeat:repeat-x;
background-color:#efebe5;
z-index:40;
}
320px のデバイス (iPod Touch など) では背景の繰り返しは必要ないため、このデバイスのコールアウトで背景を削除しました (さらに、その上の div を上に移動しました)。
@media screen and (max-width: 320px)
{
#logo
{
position:relative;
margin-top:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 117px;
z-index:50;
}
#landscape
{
position:relative;
margin-top:-45px;
margin-left:auto;
margin-right:auto;
padding-top:45px;
text-align:center;
width:100%;
height:120px;
background-image:url(../images/plated2.jpg);
background-repeat:repeat-x;
background-color:#efebe5;
z-index:40;
}
}
助言がありますか？
ありがとう！:)