1

私は数日間調査を行ってきましたが、問題の解決策を思いつくことができませんでした.

ここで、モバイル画面の区切りとして (最小幅: 320px) と (最大幅: 640px) を使用することにしました。デスクトップ ブラウザ (chrome、firefox、IE8、Safari) の場合。しかし、ファイルをサーバーに置いて iPhone 4s でサイトを立ち上げようとすると、スクリーン ブレークが機能せず、すべての背景画像が消えてしまいます。

これが私のデスクトップ css です (7 つのセクションがありますが、背景画像を除いて各セクションは同一であるため、2 つをリストします):

#home{width: 100%;
    height: 1080px;
    background: url(../images/landingPage.jpg) no-repeat fixed;
    margin: 0 auto;}

#about{width: 100%;
    height: 1080px;
    background: url(../images/about.jpg) 50% 0 no-repeat fixed;
    margin: 0 auto;}

メディア スクリーン ブレークの CSS は次のとおりです。

@media only screen and (min-width: 320px) and (max-width: 640px){

    #home{background-image: url(../images/landingPageMobile.jpg);}

    #about{background-image: url(../images/aboutMobile.png);}

}

修正に関する提案はありますか、それとも私が何か間違ったことをしているのですか?

4

1 に答える 1