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

レスポンシブWebデザイン(RWD)は、画面サイズ、プラットフォーム、向きに基づいて、さまざまなデバイスで最適なエクスペリエンスを提供するサイトを作成することを目的としたWebデザインおよび開発へのアプローチです。

30
コンテナの幅に基づくフォントのスケーリング
フォントの拡大縮小に頭を悩ませています。 私は現在、このサイトに本文がありますfont-sizeは100%です。でも100%?これは16ピクセルで計算されるようです。 100%はどういうわけかブラウザウィンドウのサイズを指しているのではないかという印象を受けましたが、ウィンドウのサイズがモバイルの幅に変更されても、フルスクリーンのワイドスクリーンデスクトップに変更されても、常に16ピクセルなので、そうではありません。 コンテナーに関連してサイトのテキストをどのように拡大できますか?使ってみたemが、これもスケーリングしません。 私の考えでは、サイズを変更するとメニューなどが潰れるため、コンテナの幅に関連して他の要素px font-sizeの.menuItem中でを減らす必要があります。(たとえば、大きなデスクトップのメニューでは、22px完全に機能します。タブレットの幅まで下に移動し、16pxより適切です。) ブレークポイントを追加できることは承知していますが、テキストを拡大縮小するだけでなく、追加のブレークポイントも必要です。そうしないと、テキストを制御するために、幅が100ピクセル減少するたびに数百のブレークポイントが発生します。

25
CSSでdivのアスペクト比を維持する
作りたい divウィンドウの幅の変化に応じて幅/高さを変更できるます。 アスペクト比を維持しながら、幅に応じて高さを変更できるCSS3ルールはありますか? JavaScriptを使用してこれを実行できることはわかっていますが、CSSのみを使用したいと思います。


5
Twitter Bootstrapに基づくレスポンシブデザインの流動または固定グリッドシステム
Twitterブートストラップグリッドのさまざまなオプションと、それらがどのように連携するかについて、混乱しています。 まず、通常のcontainer、またはを固定できますcontainer-fluid。 次に、どちらも通常のrow行または流動的な行のいずれかを含めることができますrow-fluid。つまり、流動的な列を持つ固定コンテナ、または固定された列を持つコンテナ-流体... その上に、「レスポンシブ」メディアクエリを含めるかどうかを指定できます。 私はこれらのものがどのように相互作用するかについて混乱しています。しかし、1つの明白な例から始めましょう。 上の例のページ自体、両方の一例として提示しているものがあります固定グリッドと流体グリッド ただし、私のブラウザでは、そのサンプルページ自体で、両方のグリッドが同じように動作します。サンプルページがオプションのレスポンシブメディアクエリを使用しているためでしょうか?では、両方の私は徐々に私のブラウザウィンドウを狭める開始した場合、グリッドの例としては、グリッド要素がないではない徐々に狭く取得-特定の(応答)境界幅が到達すると、彼らはより小さなサイズに、そして再び、さらに境界幅でスナップ。しかし、通常の「固定」の例と「流体」の例はどちらもここではまったく同じように動作します。つまり、違いは何ですか。

29
CSSのレスポンシブフォントサイズ
Zurb Foundation 3グリッドを使用してサイトを作成しました。各ページには大きいh1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> <!-- End Row --> コードスニペットを実行する結果を非表示スニペットを展開 ブラウザのサイズをモバイルサイズに変更すると、大きなフォントが調整されず、大きなテキストに対応するためにブラウザに水平スクロールが含まれます。 私は上のことに気付きましたZurb財団3タイポグラフィの例のページそれを圧縮して展開されているように、ヘッダがブラウザに適応します。 私は本当に明白なものを見逃していますか?どうすればこれを達成できますか?

17
「display:none」は画像の読み込みを妨げますか?
すべてのレスポンシブなWebサイト開発チュートリアルでは、display:noneCSSプロパティを使用してコンテンツをモバイルブラウザーにロードしないようにして、Webサイトのロードを高速化することを推奨しています。本当ですか?ないdisplay:none画像を読み込まないか、それはまだモバイルブラウザ上でコンテンツをロードしていますか?モバイルブラウザーに不要なコンテンツを読み込まないようにする方法はありますか?

8
レスポンシブレイアウトの要素を非表示にしますか?
ブートストラップを見ると、小さな画面のメニューバー項目の縮小をサポートしているように見えます。ページの他のアイテムに同様のものはありますか? たとえば、私は一緒に浮かんでいるナビ錠剤を持っています。小さな画面では、これにより問題が発生します。少なくとも、それを同様のクリックして表示するドロップダウンに配置したいです。 これは既存のBootstrapフレームワーク内で可能ですか?

9
ボタンを全幅にしますか?
列の幅いっぱいにボタンを配置したいのですが、問題があります... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> ボタンを列と同じ幅にするにはどうすればよいですか?

12
d3.js視覚化レイアウトをレスポンシブにする最良の方法は何ですか?
960 500 svgグラフィックを作成するヒストグラムスクリプトがあるとします。これをレスポンシブにするにはどうすればグラフィックの幅と高さのサイズを動的に変更できますか? <script> var n = 10000, // number of trials m = 10, // number of random variables data = []; // Generate an Irwin-Hall distribution. for (var i = 0; i < n; i++) { for (var s = 0, j = 0; j < m; j++) …

18
LESSを使用せずにブートストラップナビゲーションバーの折りたたみブレークポイントを変更する
現在、ブラウザーの幅が768pxを下回ると、ナビゲーションバーは折りたたみモードに変わります。この幅を1000pxに変更したいので、ブラウザーが1000px未満になると、ナビゲーションバーが折りたたみモードに変わります。LESSを使用せずにこれを実行したいのですが、LESSではなくスタイラスを使用しています。 私の問題はこの質問と同じです:Bootstrap 3 Navbar Collapse しかし、その質問のすべての回答は、LESS変数を変更してそれを行う方法を説明しています。私はLESSを扱っていません。スタイラスを使用しているので、スタイラスまたは別の方法を使用してこれを行う方法を知りたいです。 ありがとう!

19
レスポンシブCSSの背景画像
私はウェブサイト(g-floors.eu)を持っていて、背景(cssではコンテンツのbg-imageを定義しました)も反応させたいです。残念ながら、私が考えることができる1つのことを除いて、これを行う方法についてはまったくわかりませんが、これはかなりの回避策です。複数の画像を作成し、CSS画面サイズを使用して画像を変更しますが、これを実現するためのより実用的な方法があるかどうか知りたいです。 基本的に私が達成したいのは、画像(ウォーターマーク 'G'付き)が自動的にサイズ変更され、表示される画像が少なくなることです。もちろん可能なら リンク:g-floors.eu これまでに持っているコード(コンテンツ部分) #content { background-image: url('../images/bg.png'); background-repeat: no-repeat; position: relative; width: 85%; height: 610px; margin-left: auto; margin-right: auto; }

9
iOS 8で「minimal-ui」ビューポートプロパティが削除されました。他に「ソフトフルスクリーン」ソリューションはありますか?
(これはマルチパートの質問です。シナリオをまとめるために最善を尽くします。) 現在、ユーザーがタブ付きコンテンツ間をスワイプしたり、各タブ付きコンテンツ内を垂直にスクロールしたりできるレスポンシブWebアプリ(ニュースリーダー)を構築しています。 この問題に対する一般的なアプローチdivは、ブラウザーのビューポートを埋めるラッパーを使用overflowするhiddenかauto、またはに設定してから、その内部を水平または垂直にスクロールすることです。 このアプローチはすばらしいですが、主な欠点が1つあります。ドキュメントの高さがブラウザーのビューポートとまったく同じであるため、モバイルブラウザーはアドレスバーやナビゲーションメニューを非表示にしません。 画面領域を拡大するためのハッキングとビューポートプロパティは数多くありますが、minimal-ui(iOS 7.1で導入された)ほど効果的なものはありません。 iOS 8 beta4がminimal-uiMobile Safariから削除されたというニュースが昨日届きました(iOS 8リリースノートの Webkitセクションを参照)。 Q1。Mobile Safariのアドレスバーを非表示にすることはまだ可能ですか? 私たちの知る限りでは、iOS 7 はハッキングに応答しなくなりましたwindow.scrollTo。これは、垂直レイアウトを採用するか、を使用しない限り、より小さな画面スペースで生活する必要があることを示唆していますmobile-web-app-capable。 Q2。同様のソフトフルスクリーンエクスペリエンスを引き続き使用できますか? ソフトフルスクリーン私は実際に使用しなくても意味mobile-web-app-capableメタタグを。 私たちのウェブアプリはアクセスしやすいように構築されており、ネイティブのブラウザーメニューを使用して、どのページにもブックマークを付けたり共有したりできます。追加するmobile-web-app-capableことで、ユーザーがそのようなメニューを(ホーム画面に保存されたときに)呼び出すことができなくなり、ユーザーを混乱させたり、敵に反対したりします。 minimal-ui以前は中立で、メニューはデフォルトで非表示になっていますが、タップでアクセスできるようになっています。ただし、他のアクセシビリティの問題(ユーザーがタップしてメニューをアクティブにする場所がわからないなど)のためにAppleがメニューを削除した可能性があります。 Q3。フルスクリーンエクスペリエンスは問題の価値がありますか? フルスクリーンAPIはまもなくiOSに搭載されなくなるようですが、iOSに搭載されている場合でも、メニューにアクセスできるようになる方法はわかりません(AndroidのChromeでも同じです)。 この場合、モバイルサファリをそのままにして、ビューポートの高さを考慮に入れる必要があります(iPhone 5以降の場合は460 = 568-108で、108にはOSバー、アドレスバー、ナビゲーションメニューが含まれます。iPhone4または古い、それは372です)。 (ネイティブアプリの構築以外に)いくつかの代替案を聞きたいです。

11
CSS Media QueryのIE8サポート
IE8は次のCSSメディアクエリをサポートしていません。 @import url("desktop.css") screen and (min-width: 768px); そうでない場合、別の書き方は何ですか?Firefoxでも同じように機能します。 以下のコードに問題がありますか? @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);

4
レスポンシブスクエアのグリッド
StackаэтотвопросестьответынаStack Overflowнарусском:Сеткаизадаптивных(sensitive)квадратов レスポンシブな正方形のレイアウトを作成するにはどうすればよいのでしょうか。各正方形には、垂直方向と水平方向に配置されたコンテンツがあります。具体的な例を以下に示します...

22
iframeをレスポンシブにする
私は読んでいたこのstackoverflowの記事「?あなたはインラインフレームを応答することはできます」というタイトルを、そしてコメント/答えの一つが私を導いた、このjfiddle。 しかし、自分のニーズに合うようにHTMLとCSSを実装しようとしたとき、同じ結果/成功がありませんでした。私は自分のJSフィドルを作成しました。私が使用しているiFrameのタイプと何らかの関係があると確信しています(たとえば、製品の画像も応答性が必要な場合など)。 私の主な懸念は、ブログの読者がiPhoneで私のブログにアクセスするときに、すべてをx幅(すべてのコンテンツに対して100%)にしたくないので、iFrameが正しく動作せず、唯一の要素が広くなる(したがって、スティックする)ことです。他のすべてのコンテンツを超えて-それが理にかなっている場合??) とにかく、なぜそれが機能しないのか誰か知っていますか?ありがとうございました。 MY JSFIDDLEのHTMLとCSSは次のとおりです(リンクをクリックしたくない場合)。 <div class="wrapper"> <div class="h_iframe"> <!-- a transparent image is preferable --> <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" /> <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe> </div> </div> これが付随するCSSです。 .wrapper { width: 100%; height: 100%; margin: 0 auto; background: #ffffff; } .h_iframe { position: relative; } .h_iframe …

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.