異なる画面サイズでfloatを変更する方法はありますか？

Question

私はそれを明確に説明することができるか、これが可能かどうかは分かりません。私はHTML/CSSの基本的な把握しかありません。私はフローティング要素を持つ方法を探しています小さな画面（モバイルデバイス）から表示されます。私はパラグラフの左側に浮遊するイメージを持っていますが、モバイルから見ると、テキストが並んでいるイメージはあまりにも混雑してしまいます。通常は左側に浮かせる方法がありますが、小さな画面ではテキストの上に表示されますか？ありがとう！

Answer 1

必要なのは、メディアクエリを定義することです。メディアクエリは、特定のルールが適用される解像度を定義するcssトリガに似ています。

.div img { 
    float: left; 
} 

/*This will cause the img receive float none rule when screen is smaller than 768px*/ 
@media only screen and (max-width: 768px) { 
    .div img { 
     float: none; 
    } 
} 

詳細はhereをご覧ください。

Answer 2

media queriesを使用する必要があります。

たとえば、

@media only screen and (max-width: 768px) { 
    .content { 
     float: none; 
    } 
} 

基本的に、画面サイズが768pxより小さい場合、クラスのコンテンツには浮動小数点がありません。

Answer 3

何が呼び出されMediaQueriesを探しています：（

@media screen and (max-width: 400px){ 
    yourelementselector { 
     ... your CSS... 
    } 
}