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

Bootstrapの応答性のナビゲーションバーをテストしています。デモ用の Webサイトがあります。デスクトップでブラウザーのサイズを変更すると、ナビゲーションバーが上部にある小さなアイコンで折りたたみ可能なメニューになり、クリックしてさらにメニューボタンを表示できるなど、すべて正常に機能します。 しかし、モバイルブラウザー（ChromeとAndroidのインターネットブラウザーで試してみました）から試したところ、レスポンシブデザインが表示されませんでした。ウェブサイトのようなデスクトップの非常に小さいバージョンしか見ることができませんでした。 誰かが私が間違っていることを指摘できますか？

139 twitter-bootstrap  user-interface  twitter-bootstrap-3  responsive-design  bootstrap-4 

（正方形のアスペクト比を維持するために）ブラウザのサイズを変更すると、幅に応じて高さが変わるコンテナを設定する次のコードがあります。 HTML <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> CSS .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: 100%; /* forces 1:1 aspect ratio */ } .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } コンテナ内でIMGを垂直に配置するにはどうすればよいですか？すべての画像の高さは可変で、応答性が高いため、コンテナの高さ/行の高さを固定できません...助けてください！

135 html  css  responsive-design  vertical-alignment 

iPhone 5は画面が長く、私のウェブサイトのモバイルビューを捉えていません。iPhone 5の新しいレスポンシブデザインクエリとは何ですか？既存のiPhoneクエリと組み合わせることができますか？ 私の現在のメディアクエリはこれです： @media only screen and (max-device-width: 480px) {}

132 iphone  css  responsive-design  media-queries  iphone-5 

以下のレイアウトのように、ページの中央にdivを配置して、ブートストラップを使用してレスポンシブページを作成する必要があります。

132 css  twitter-bootstrap  responsive-design 

私のウェブサイトにはYouTube動画が埋め込まれており、画面をタブレットやスマートフォンのサイズに縮小すると、幅が約560pxで縮小しなくなります。これはYouTube動画の標準ですか、それとも小さくするためにコードに追加できるものはありますか？

125 youtube  responsive-design  embed 

16:9ビデオのように、ほぼ横長に固定されたアスペクト比を持つ、まとめるサイトがあります。 利用可能な幅と利用可能な高さを満たすために、それを中央に配置して拡大させたいですが、どちらの側でも大きくなることはありません。 例えば： 縦長の薄いページでは、高さを維持しながらコンテンツを全幅に拡大します。 短い幅のページでは、コンテンツが高さいっぱいに広がり、幅が比例します。 私が見てきた2つの方法があります。 正しいアスペクト比の画像を使用してコンテナを拡張divしますが、主要なブラウザ間で同じように動作させることができませんでした。 比例した下パディングを設定しますが、これは幅に対して相対的にのみ機能し、高さは無視します。幅が広くなるにつれて、垂直スクロールバーが表示されます。 私はあなたがJSでこれを非常に簡単に行うことができることを知っています、しかし私は純粋なCSSソリューションが欲しいです。 何か案は？

122 html  css  responsive-design  aspect-ratio 

私は携帯電話に応答する必要があるウェブサイトを持っています。デスクトップを使用して作成しました。ブラウザウィンドウを調整すると、携帯電話で問題なく動作しますが、実際の携帯電話であるSamsung Galaxy S2で確認すると、モバイルビューに反応しません。 何が悪いのでしょうか？

117 mobile  web  responsive-design 

目標は、<svg>要素がその親コン​​テナのサイズに拡張さ<div>れることです。この場合は、コンテナの大きさに関係なく、です。 コード： <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> この問題の最も一般的な解決策viewBoxは、<svg>要素の属性を設定することです。 viewBox="0 0 widthOfContainer heightOfContainer" ただし、これは、要素内の<svg>要素に事前定義された幅や高さがある場合は機能しないようです。たとえば<rect>、上のコードの要素には、幅と高さが明示的に設定されています。 したがって、明らかな解決策は、これらの要素にも幅と高さを使用することです。しかし、これは実行する必要があるのでしょうか？特に、高さや幅<img src=test.svg >を明示的に設定しても問題なく機能し、問題なく拡張/縮小し<rect>ます。 のような要素<rect>とそのような他の要素の幅と高さをパーセンテージで定義する必要がある場合、Inkscapeでそれを設定して、<svg>ドキュメントのすべての要素が固定サイズの代わりにパーセンテージの幅、高さなどを使用するようにする方法があります。 ？

112 css  html  svg  responsive-design 

Twitter Bootstrapを使用してWebアプリケーションにレスポンシブデザイン機能を追加する必要があります。レスポンシブな動作が必要なだけで、Bootstrapに含まれているタイポグラフィやコンポーネントなどには興味がありません。 グリッドシステムを選択するだけで、カスタマイズされたBootstrapバージョンを取得しました。しかし、生成されたCSSをアプリケーションに追加すると、すべてのスタイル（ヘッダー、リンクなど）がめ​​ちゃくちゃになります。なぜそれが起こっているのですか？グリッドシステムだけでブートストラップCSSを取得するにはどうすればよいですか？Bootstrapファイルの手動変更を回避したいと思います。

109 html  css  twitter-bootstrap  responsive-design 

Twitter Bootstrapがレスポンシブ/デバイスフレンドリーになるように設計されているとすると、相対フォントサイズを使用しないのはなぜですか？

104 twitter-bootstrap  mobile  fonts  responsive-design  font-size 

これはばかげた質問のように聞こえるかもしれません。 このCSSスニペットを通常の表示に使用する場合（box-bg.png200px x 200pxです）。 .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } このようなメディアクエリを使用してRetinaディスプレイをターゲットにすると（@ 2x画像が高解像度バージョンになります）; @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat top left;} } .box新しい高解像度の背景画像と一致させるために、div のサイズを400px x 400px に2倍にする必要がありますか？

102 css  responsive-design  media-queries 

私はこのコードを持っています： <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

下の画像のように、片側のみ（たとえば、下側）に傾斜したエッジがあり、他のエッジはまっすぐな形状を作成しようとしています。 borderメソッド（コードは以下に示す）を使用してみましたが、形状の寸法が動的であるため、このメソッドを使用できません。 .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape"> Some content </div> コードスニペットを実行する結果を非表示スニペットを展開 背景にグラデーションを使用してみました（以下のコードのように）が、寸法が変わるとめちゃくちゃになります。下のスニペットの形にカーソルを合わせると、私が何を意味するかがわかります。 コードスニペットを表示 .gradient { display: inline-block; …

90 html  css  responsive-design  css-shapes 

編集： 画面が480px幅未満に縮小されたときに、どのセレクターがサイドパディングを設定するかを尋ねる必要がありますか？私はこれを見つけるためにしばらくbootstrap-responsiveness.cssを閲覧してきましたが、これに影響を与えるものは何もないようです。 オリジナル 私は基本的に、小さなデバイス画面での応答性のために設定されたデフォルトのパディングまたはマージンを削除したいと思います。 私がしているbackground colorに上書きcontainer-fluidセレクタと大画面のために、彼らは幅にわたって完全に100％をレンダリングするが、それらの画面が小さいサイズに縮小され、デフォルトでは、ブートストラップは、上のマージンやパディングを追加しているようですcontainer-fluidかcontainer。 <div class="container-fluid"> <div class="row-fluid"> test </div> </div> カスタムcssを使用してBootstrapのデフォルトのスタイルを上書きする場合、小さい画面でこのパディングを削除するには、どのメディアクエリまたはセレクターに上書きする必要がありますか？

89 css  twitter-bootstrap  responsive-design  media-queries 

重複を避けるために、メディアクエリの間隔を正確に設定するにはどうすればよいですか？ たとえば、コードを検討すると、次のようになります。 @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } サポートされているすべてのブラウザーで、正確に20emと45emで何が起こりますか？ 私は人々が使用するのを見てきました：799px、次に800pxのようなものですが、799.5pxの画面幅はどうですか？（明らかに、通常のディスプレイではなく、網膜のディスプレイですか？） スペックを考えれば、ここでの答えが一番気になります。

88 css  responsive-design  media-queries