問題タブ [responsive]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
2 に答える
424 参照

html - 列のブートストラップ列

これは視覚的なデモンストレーションです:画像

ラップトップの列 (col-md-8) を 2 番目の列に入れようとしていますが、試してみると、もう 1 つはラップトップの列の下に入りました。ラップトップの列の中にあり、その列のラップトップはまだフルサイズです。

0 投票する
0 に答える
114 参照

javascript - レスポンシブ ブートストラップ カルーセル アイテム

Bootstrap カルーセルを使用しています。カルーセルをレスポンシブにして、画面の幅に応じて異なる数のアイテムを画面に表示したいと考えています。

たとえば、カルーセルに表示したいものが 6 つあるとします。

人がモバイルで表示している場合、カルーセルの下にある 6 つのインジケーター ボタンを使用して一度に 1 つのアイテムを表示し、残りのアイテムを切り替えたいと考えています。

ただし、人がデスクトップで表示している場合は、カルーセルの下にある 2 つのインジケーター ボタンを使用して、一度に 4 つのものを表示したいと考えています (1 番目には 4 つのアイテムがあり、2 番目には 2 つのアイテムがあります)。

さまざまなシナリオと、カルーセルの外観と動作を示す例を作成しました。デモでは、これを実現するために 3 つの異なるカルーセルを使用しています。明らかに、1 つのレスポンシブ バージョンを探しています。

jsfiddle の例を次に示します (パネルのサイズを変更する必要がある場合があります): jsfiddle

レスポンシブ イメージの例

0 投票する
2 に答える
58 参照

html - 隣接する div の高さを維持する % ベースの三角形

ヘッダーの一部としてレスポンシブな三角形を作成しようとしています。これにより、隣接する div でサイズを変更するときにプロポーションが維持されます。ここに私の構造とのコードペンリンク。適切なスペースに収まる三角形を作成するのに問題があり(回転してオーバーフローを非表示にしようとしました)、その上に横の div でサイズが変更されます。

Codepen で直接表示するには、ここをクリックしてください

画像

0 投票する
1 に答える
50 参照

html - フレックスボックスで画像のサイズが変更されない

私はこれを持っています

ブラウザのサイズを変更すると、.content の画像のサイズが変更されず、水平スクロールを行う必要があります。画像のサイズを変更するにはどうすればよいですか? 子コンテナは親コンテナよりも大きくなりません。ありがとう。

編集: .content を列に、mas の高さを 800px に変更しました。.content の記事を下げて、800px に達したら、別の列を作成します。問題は解決せず、.content の記事が代わりに親ボックスの外に出るか、サイズが変更されます...

0 投票する
4 に答える
474 参照

javascript - HTMLでレスポンシブな左側の列を作成する方法

2 行 (ヘッダーとフッター) 1 列 (左側) と 1 つのメイン コンテンツ div レイアウトを使用しています。

それはロックハードレイアウトです。

Ajaxを使用してデータをフェッチすると、データと左バーもストレッチしてフッターに接続する必要があるため、メインコンテンツのdivがストレッチされますが、そうではありません。

並べ替えでは、左側のサイドバーの応答性の高い高さが必要です。

画像は以下

データなし

データ付き

前もって感謝します。

0 投票する
1 に答える
55 参照

php - 画面が小さい場合、PHPは切り捨てます

Web サイトにパンくずリストがありますが、画面が 480px より小さい場合に切り捨てたいです。mb_strimwidth() 関数を使用していますが、php で画面が 480px より小さいかどうかを検出するにはどうすればよいですか?

0 投票する
1 に答える
302 参照

css - jQueryを使用して追加する場合、流動的なデザインでdivの同じ幅/高さの比率を維持します

お時間を割いていただきありがとうございます。

私は達成したい:

  1. ウィンドウ全体を四角形の div で埋めます。
  2. 1 行に 20 個の正方形が必要です。
  3. ページの読み込み時に jQuery を使用してそれらを追加したい。
  4. 画面が横向きから縦向きに変わるモバイルデバイスは考慮していません。デスクトップ デバイスの幅が異なるだけです。

それらのそれぞれは異なる色を持っているので、私のjavascriptはHTMLコンテナにそれぞれ異なるdivを .append() するループです。

これは追加内のコードです:

自動高さが二乗比を維持することを望んでいましたが、そうではありません。jQueryを使用して、追加されたdivのピクセルのサイズを取得し、それを使用して高さを設定できますが、ウィンドウのサイズが変更されるたびに同じことをしなければならないため、そのアプローチでは応答性に疑問があります。

これを達成する方法についての考えやアイデアはありますか?

ありがとうございました!

0 投票する
3 に答える
351 参照

html - レスポンシブ デザインのブレークポイント

私はブートストラップから離れようとしており、実際にブレークポイントを自分で制御しています。学習を進める前に、自分が正しい道を進んでいるかどうかを知りたいです。したがって、次のようにするのは正しいですか:

HTML:

CSS:

0 投票する
1 に答える
44 参照

html - レスポンシブ行を作成する

私は本当にとても混乱していて、私は叫ぶことができます。ブートストラップの幸せから抜け出して、自分のブレークポイントの使い方を学ぼうとしています。私はこのページを見ています:

http://zurb.com/studios

私はとても好きです。コードを理解しようとしています。各行の下には、fx コール クラスの大きな 12 列があります。それらはどこで定義されていますか?そのウェブサイトのようなグリッドを作成する方法を学びたいだけです。多分誰かがどこかでチュートリアルを知っていますか?