イメージを正しく配置する方法と、すべての解像度に合わせてHTML/CSSを作成する方法はありますか？

Question

私はこの全体の初心者です。私は学校でプロダクトプロモーションプロジェクトを作成するように指示されています。私は自宅で働いていましたので、大きなモニターを持っている学校にアップロードしたとき、私はすべてがとても違ったものになっていることを心配しました。私は誰も私がこの問題を解決する手助けすることができHow I coded in HTML[][1]]1How I coded in CSS

のように見えるようにウェブサイトを意図した方法[？

Answer 1

応答性を持たせたい場合は、絶対配置を使用することはできません。これについて考えてみてください.pxで絶対に何かを置くと、モニタに関係なくそこにとどまるでしょう。

私は視覚的な例として、この絵を作成しました：

を見ての通り、赤い四角が絶対的位置付け要素です。それは言うことができます。このクラスを持っています

.square { 
    background-color: red; 
    height: 100px; 
    width: 100px; 

    position: absolute; 
    top: 400px; 
    right: 1255px; 
} 

Absolute lengths example as a codepen

あなたは上の画像を見ての通り、それは電話でタブレットのビューポートでレンダリングしませんが。

これはなぜですか？

論理的に、タブレットには電話よりも多くの画像を表示するためのピクセルがあります。それは簡単ではありません。

どのように反応させるのですか？（別のデバイスでも同じ表示）

ピクセルの代わりに、ビューポートに関連した測定を使用する必要があります。 AKA Relative Lengths。

は、上記の問題

.square { 
    background-color: red; 
    height: 100px; 
    width: 100px; 

    position: absolute; 
    top: 400px; 
    right: 66%; 
} 

relative lengths example as a codepen を修正することができますうん...それはそれは多かれ少なかれです。ブラウザのウィンドウを小さくして魔法を見ることで、2つのコードを比較することができます。