変更位置

Question

私は、応答性のウェブサイトをセットアップするプロジェクトに関わっていると私はここにまたはどこか他の答えを見つけることができないとの問題が発生している：

を見ますテキストと画像のある特定のボックスデスクトップ/タブレットや小さな画面（スマートフォンなど）を使用すると、画像の位置を変えたい。デスクトップ/タブレットでは、画像は固定サイズで、テキストの横に表示されますが、見出しの下に、小さな画面では、画像が見出しの上に表示され、テキストが100％サイズで入力されます。

実際に、いくつかの写真でそれを表示する方が簡単かもしれません：

それは私はそれは小さな画面を上に見えるようにしたいどのようにデスクトップ/タブレット

にどのように見えますか

（望ましくない）あなたは私が見出しとテキストが画像によってカバーされます、結果的にこれを行う方法を考え出したていない見ることができるように、私は

を行ってきたコードと小さな画面上の結果、およびそれ箱の境界を尊重しない。デスクトップ/タブレット用

CSS：

div {position: relative;} 

div img { 
width: 200px; 
float: right; 
margin-left: 40px; 
margin-bottom: 20px;} 

小さい画面用CSS：

div {position: relative;} 

div img { 
position: absolute; 
top: 20px; 
width: 100%; 
margin-bottom: 20px;} 

そしてのためのHTMLこれは私が試したコードですdiv：

<div> 
<h2>Sed ut perspiciatis unde omnis iste</h2> 
<img src="img/blossom.jpg"> 
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. 
</div> 

いくつかの注意事項：色、フォントなどはグローバルCSSで宣言されていますが、この問題には重要ではありません。デスクトップ/タブレットのバージョンは正常に動作しています。画面が小さくなり、スマートフォンのバージョンがイメージを読み込むと、正常に動作しません。画像がなければ、小さなバージョンは正常に動作します。

ここで大きな問題は、小さな画面のバージョンが読み込まれたときに、見出しを含むすべてのテキストの上にCSSを使用してイメージを移動する方法です。イメージは、ボックスの幅とテキストを尊重する必要があります。

私は信じていますが、これまでのところ運のないさまざまなアプローチを試みましたが、私は立ち往生しています！おそらく解決策は非常に明白でシンプルですが、私はそれを理解することはできません。確かに誰かが何をすべきか知っていればいいと思う？

Answer 1

ピクセルの幅を指定すると、トリックが行われます。それを反応させるために使用する場合は、ここでのようなメディアクエリを使用する必要があります。

@media (min-height: 680px), screen and (orientation: portrait) { 
div {position: relative;} 

div img { 
position: absolute; 
top: 20px; 
width: 200px; 
margin-bottom: 20px;} 
} 

これで、画面ではなく画像の幅全体を使用するようになりました。