方法-レスポンシブフロート
CSSを使用してレスポンシブフローティング要素を作成する方法を学びます。
レスポンシブフロート
メディアクエリを使用して、要素をフロートさせるタイミングについて、指定した画面幅(ピクセル単位)を設定します。
例
/* Float to the right on screens that are equal to or less than 768px wide */
@media (max-width: 768px) {
.float-right-sm {
float: right;
}
}
/* Float to the right on screens that
are equal to or greater than 769px wide */
@media (min-width: 769px) {
.float-right-lg {
float: right;
}
}
ヒント:フロートの詳細については、CSSフロートチュートリアルをご覧ください。