styles - CSS を使用して特定の幅でスパンをスタイル設定する

Question

特定の幅に達したときにスパンにスタイルを適用する方法はありますか?

のようにspan[width=100%]{ background-color: green }。

のような入力でそれを行うことができることはinput[type=text]知っていますが、スパンでこれを行う方法がわかりません。

Answer 1

次の 2 つのオプションがあります。

1width -要素 (JS)の現在を取得し、X値よりも大きい場合にスタイルを適用します。

2 -メディア クエリで、widthが > よりも大きいX場合、特定のスタイルを適用します。

ハンドヘルド デバイス、または幅が 20em を超えるスクリーン デバイス用のスタイル シートを指定する場合は、次のクエリを使用できます。

@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }

幅メディア機能は、出力デバイスのレンダリング サーフェスの幅 (ドキュメント ウィンドウの幅、またはプリンターのページ ボックスの幅など) を表します。