レスポンシブ Web サイトの機能を作成しています。キャプションを含む画像カルーセルで構成されています。デスクトップでは、キャプションを絶対に表示しています。divヘッダーと段落を含む は、画像の上に配置され、40% の幅を占めます。
ユーザーがタブレットまたはモバイルを使用している場合、キャプションを幅 100% で相対的に表示したいと考えています。これにより、画像の下にテキストが表示され、小さい画面サイズにより適したものになります。
これを行う 2 つの方法は、コードを異なる css クラスで複製することです。1 つはvisible-desktopクラスに関連し、もう 1 つはクラスに関連する絶対 divhidden-desktopです。もう 1 つの方法は、javascript を使用してクラスを切り替えることです。
純粋にcssを使用して上記を達成できれば素晴らしいと思いました。.desktop .carousel-caption {これはまったく可能ですか。