3

これは非常に基本的な質問であると確信しているため、私はこれに慣れていないため、事前にお詫び申し上げます。

私は、最初にモバイルになるように設計された Web アプリに取り組んでいます。私の初期レイアウトはすべて小さな画面用に設計されているため、携帯電話の jpg を<img>. 次に、絶対配置を使用してキャンバスをこれにオーバーレイしました。これにより、ハンドセットで常にテストする必要なく、デザインを実験しながら使用できる疑似モバイル画面が得られます。

アイデアは、適切なメディアクエリを使用display:blockして、小さな画面に遭遇したときに画像が表示されないようにすることです。

しばらくの間、私はそれを動かしていましたが、今はそれを壊してしまい (バックアップなしで)、どうすればいいのかわかりません! より広いデスクトップ画面で問題なく動作します。画像コンテナーが表示され、背景キャンバスが正しく上に配置されます。ただし、イメージ コンテナーはモバイル デバイスにも表示されます (絶対位置がないため)、実際のレイアウトは .

HTMLはこんな感じ…

<div id="container">
    <img src='phone.jpg' class="desktop-visible"/>
</div>

<div id="backdrop">
    Text
</div>

私のCSSは現在これです...

// Set Defaults
.desktop-visible { display:none;}

// Desktop and landscape tablets
@media (min-width: 768px) {

.desktop-visible { display: block; margin: 0 auto; }

#container {
        position:relative;
        width: 538px;
        margin: 0 auto;
}

#container img {
        position:absolute;
        margin: 0 auto;
}

#backdrop {
        margin: 0 auto;
        position:absolute;
        top:86px;
        left:26px;
        width:483px;
        max-height: 862px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
}

// Portrait tablets and landscape mobiles
@media (max-width: 767px) {

.desktop-visible { display: none; }

#container {
    position:relative;
    width: 538px;
    margin: 0 auto;
}

#container img {
    display: none;
}

#backdrop {
    margin: 2px auto;
    height: 820px;  
}

}

// Portrait mobiles
@media (max-width: 480px) {

.desktop-visible { display: none; }

#container {
    display: none;
}

#container img {
    display: none;
}

#backdrop {
    margin: 2px auto;
    height: 820px;
}

}
4

1 に答える 1

7

最初のメディアクエリを閉じていません。:-)

// Set Defaults
.desktop-visible { display:none;}

// Desktop and landscape tablets
@media (min-width: 768px) {

.desktop-visible { display: block; margin: 0 auto; }

#container {
        position:relative;
        width: 538px;
        margin: 0 auto;
}

#container img {
        position:absolute;
        margin: 0 auto;
}

#backdrop {
        margin: 0 auto;
        position:absolute;
        top:86px;
        left:26px;
        width:483px;
        max-height: 862px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
}

} // you missed this one

// Portrait tablets and landscape mobiles
@media (max-width: 767px) {

.desktop-visible { display: none; }

#container {
    position:relative;
    width: 538px;
    margin: 0 auto;
}

#container img {
    display: none;
}

#backdrop {
    margin: 2px auto;
    height: 820px;  
}

}

// Portrait mobiles
@media (max-width: 480px) {

.desktop-visible { display: none; }

#container {
    display: none;
}

#container img {
    display: none;
}

#backdrop {
    margin: 2px auto;
    height: 820px;
}

}
于 2013-05-23T13:12:06.553 に答える