11

投稿のコンテンツが div に読み込まれるエディターを構築しています。jQuery セレクターを使用すると、コンテンツをインラインで編集できます。

テンプレートのスタイリングに応答性を追加しようとしていたときに、ちょっとしたハードルに遭遇しました。私のテンプレート スタイルシートでは、プレビュー エリアの特定の ID を使用して、スタイルを適用する場所を指定しています。エディターのプレビューと投稿の完全なビューの両方が同じように見えるように、投稿の表示の body タグに同じ ID を適用します。

ビュー側にいくつかのメディアクエリを入れていたところ、プレビューページでは@media screen and (max-width: 640px)、プレビューが画面の幅全体を占有しないため、動作が異なることに気付きました。

画面の幅以外のメディアクエリセレクターを使用する方法はありますか?代わりに、要素の幅..または同等のものを使用できますか? または、単純にjavascriptを使用してその動作を模倣する別の方法があるでしょうか..

4

2 に答える 2

8

残念ながら、現在、メディア クエリが div をターゲットにする方法はありません。メディア クエリは、ブラウザー ウィンドウ、モバイル デバイス画面、テレビ画面などを意味する画面のみをターゲットにできます。

于 2012-11-21T15:34:49.783 に答える
0

更新 (2018):

これは、多くの開発者にとって依然として一般的な問題です。要素のサイズを照会する JavaScript がなければ方法はありません。CSS での実装も非常に困難です。なぜなら、それが引き起こす「循環的な依存関係」のためです (要素はそのサイズを決定するために別の要素に依存し、要素クエリは子のサイズ変更を引き起こし、親のサイズ変更を引き起こし、子 ETC のサイズ変更を引き起こします... )

現在の要素クエリのランドスケープの優れた要約があります。

最近の頼りになるソリューションは、EQCss ライブラリhttps://github.com/eqcss/eqcss、または「CSSinJS」タイプのソリューションを使用して、React や Vue などの JavaScript フレームワーク内で変更を処理することです。

私の古くて陽気にぎこちない「解決策」：

今のところ私は使用しています：

.preview {
    zoom: .8; 
    -moz-transform: scale(0.8);}

.preview div がページ幅の 80% の場合。一般的には機能していますが、いくつかの問題があり、問題の div が常にページ幅の % に設定されるとは限らないため、完全に柔軟ではありません。

于 2011-09-05T20:46:34.820 に答える