タグ付けされた質問 「responsive」

2つのdivがあります。1つはページの左側にあり、もう1つはページの右側にあります。左側のものは幅が固定されており、右側のものは残りのスペースを埋めてほしい。 #search { width: 160px; height: 25px; float: left; background-color: #ffffff; } #navigation { width: 780px; float: left; background-color: #A53030; } <div id="search">Text</div> <div id="navigation">Navigation</div> コードスニペットを実行する結果を非表示スニペットを展開

419 html  css  width  responsive 

その内容がどのようなものであっても。 これは可能ですか？

170 html  css  responsive 

私は現在、会社のモバイルランディングページに取り組んでいます。これは本当に基本的なレイアウトですが、ヘッダーの下には常に100％の幅になる製品の画像があります（デザインは常に端から端まで行くことを示しています）。画面の幅に応じて、画像の高さは明らかにそれに応じて調整されます。私はもともとimg（CSS幅100％）でこれを行いましたが、うまく機能しましたが、メディアクエリを使用して、さまざまな解像度に基づいてさまざまな画像を提供したいと思いました。たとえば、同じ画像の大きなバージョン。CSSでimgsrcを変更できないことはわかっているので、HTMLのimgタグではなく、画像にCSSの背景を使用する必要があると考えました。 背景画像のdivは背景を表示するために幅と高さの両方を必要とするため、これを適切に機能させることができないようです。明らかに「幅：100％」を使用できますが、高さには何を使用しますか？150pxのようなランダムな固定高さを設定すると、画像の上部150pxが表示されますが、固定高さがないため、これは解決策ではありません。私は遊びをして、高さがあれば（150pxでテスト）、「background-size：100％」を使用して画像をdivに正しく合わせることができることを発見しました。このプロジェクトはモバイルのみを対象としているため、最新のCSS3を使用できます。 以下に大まかな例を追加しました。インラインスタイルを失礼しますが、質問をもう少し明確にするための基本的な例を示したいと思いました。 <div id="image-container"> <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> </div> コンテナdivにページ全体に基づいてパーセンテージの高さを指定する必要があるのでしょうか、それともこれを完全に間違って見ているのでしょうか。 また、CSSの背景がこれを行うための最良の方法だと思いますか？たぶん、デバイス/画面の幅に基づいて異なるimgタグを提供する手法があります。一般的な考え方は、ランディングページテンプレートはさまざまな製品画像で何度も使用されるため、これを可能な限り最善の方法で開発する必要があります。 申し訳ありませんが、これは少し時間がかかりますが、このプロジェクトから次のプロジェクトへと行ったり来たりしているので、この小さなことをやりたいと思います。よろしくお願いします。よろしく

89 html  css  background-image  responsive  responsive-images 

Reactコンポーネントを使用する複雑なWebページがあり、ページを静的レイアウトからより応答性が高く、サイズ変更可能なレイアウトに変換しようとしています。しかし、私はReactで制限に直面し続けており、これらの問題を処理するための標準的なパターンがあるかどうか疑問に思っています。私の特定のケースでは、display：table-cellとwidth：autoを持つdivとしてレンダリングされるコンポーネントがあります。 残念ながら、コンポーネントの幅をクエリすることはできません。これは、要素が実際にDOM（実際にレンダリングされた幅を推定するための完全なコンテキストを持っている）に配置されない限り、要素のサイズを計算できないためです。これをマウスの相対的な配置などに使用するだけでなく、コンポーネント内のSVG要素に幅属性を適切に設定するためにも必要です。 さらに、ウィンドウのサイズが変更された場合、セットアップ中にあるコンポーネントから別のコンポーネントにサイズの変更を伝えるにはどうすればよいですか？サードパーティのSVGレンダリングはすべてshouldComponentUpdateで実行していますが、自分自身またはそのメソッド内の他の子コンポーネントに状態やプロパティを設定することはできません。 Reactを使用してこの問題に対処する標準的な方法はありますか？

86 javascript  reactjs  responsive