画像をモバイルで同じ位置に表示する

Question

私は自分のウェブサイトを作って、アイコンをデスクトップに完全に収まるように配置しましたが、モバイルではアイコンがバックグラウンドの下に表示されるようです。

ライブバージョンのコードにhttp://viralpvp.net/ ペーストビン：https://pastebin.com/9ibFp84G

私はそれが私が間違っていた、このセクションであると考えていますが、私はわからないので、あなたが助けることができるなら、私に教えてください！

width:400px; 
height:400px; 
max-width:100%; 
vertical-align:middle; 
text-align:center; 
display:inline-block; 

Answer 1

あなたのコードには、pxの固定値が使用されています。
デスクトップ上（デスクトップ上にデザインされている場合）は見栄えが良いかもしれませんが、携帯電話の幅がピクセル数が少ないため、元の順序に応じてイメージを上下にプッシュします。

基本的にはそのサイズがその問題を解決するには400ピクセル

によって400ピクセルに固定されているので、あなたのイメージは、モバイルには大きすぎます、私はサイズ変更可能なユニットに画像固定幅を変更することをお勧めします。
サイズ変更可能なユニットの一例はvwです。
vwはビューポートの略で、画面の幅に基づいています。
数値は0〜100の数値で表されます。

％(%)とvwの違いは、パーセントは容器または容器の相対的なサイズですが、vwは常にビューポートに基づいています。

以下は、ビューポートの使用例です。
例をフルスクリーンで表示し、デスクトップブラウザのサイズを変更して、その動作を確認してください。それに沿って画像のサイズを変更します。

vwとすると、vwのすべての最小幅と高さを設定する必要があります。モバイルデバイスでは小さすぎる可能性があるからです。そのためには、min-widthとmin-heightを使用してください。

私は助けました！

マーク

#vwTest 
 
    { 
 
    background-color: gray; 
 
    width: 30vw; 
 
    height: 30vw; 
 
    } 
 
    
 
#vwTest2 
 
    { 
 
    background-color: lightgray; 
 
    width: 50vw; 
 
    height: 50vw; 
 
    }

<div id="vwTest"> 
 
</div> 
 
<div id="vwTest2"> 
 
</div>