0

非常に謙虚な15時間の試みの後で、私は困惑しています. :/ 景品を提供しているのは、デバイス レスポンシブ サイトの理論をテストするための単純な反対のように見えたからです。いいえ。私はそれを考えすぎているのではないかと感じています。それは私が一生懸命学んでいるものです。正しい方向へのフィードバックやプッシュは大歓迎です。私は最初に HTML5 とデバイス向けのコーディングの両方に不慣れです。

使用: http://byevan.com/web-template/BuzzApp/ テスト サイト: http://justimaginewebdesigns.com/nathalie/mobile/すべてのデバイスで最終的にどのように見える かの添付画像。JavaScript を使用して、リンクの div を下部に固定します。

問題: リンクの Div コンテナが背景画像と調和して応答しません。

  • メインの bg 画像に CSS3 を使用すると、応答性が高くなり、@media エントリが機能しますが、bg 画像自体のために横向きモードで表示するのが最適です。
  • % ベースのマージンの使用に一貫性がない
  • % ベースの相対位置の使用に一貫性がない
  • テキストを保持し、ホットスポットのロールオーバーで画像を使用するだけを破棄しようとすると、デバイス間で惨めに失敗します.
  • 上記の JavaScript に left position 属性を追加すると、デバイス間で一貫性がなくなります。
  • さらに多くの実験の試み...
4

1 に答える 1

0

これで、モバイル ファーストのデザインを採用すると仮定した場合の結果が得られるはずです。画面サイズが大きくなると、左マージンを正しくするために、さらにいくつかのブレークポイントを追加する必要がある場合があります。

また、ナビゲーション項目から画像の幅と高さを削除して使用する必要があります

img {
width: 100%;
max-width: 100%;
}

次に、コンテナ div で画像の幅を設定します。

.homelinks { 
             position:fixed;
             bottom:100px;
             left: 5%;
             -webkit-transition: all 0.3s ease-out; 
             -moz-transition: all 0.3s ease-out; 
             -o-transition: all 0.3s ease-out; 
             transition: all 0.3s ease-out; 
            }

 @media Screen and min-width(700px){
.homelinks { 
             position:fixed;
             bottom:100px;
             left: 26%;
            }}
于 2012-08-21T03:00:37.247 に答える