問題タブ [responsive-design]

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 投票する
1 に答える
993 参照

jquery - Jqueryを使用して、絶対位置のオブジェクトをページスクロールに固定したままにします

これは基本的に私の前の質問からの続きです。

私の固定要素がレスポンシブ環境でうまくいかないのを見て、どういうわけか、ラッパーに絶対的に配置された小さなナビゲーションメニューを用意する必要があります。ウィンドウが拡大縮小するときにラッパーで拡大縮小しますが、スクロールするときは上部を固定したままにします。

これはjQueryで可能になると思いますが、どうすればよいかわかりません。

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

html - さまざまな Web デバイスに対応する最も効率的な方法は?

建設的ではないとして閉会に投票する人々は、すべてを読んでください. 最後に具体的な質問。実際の例とアプローチを探しています。

環境

スマートフォンやタブレットなどの多数のデバイスが Web にアクセスするためにますます使用されるようになっているため、デバイスに高速でカスタマイズされたユーザー エクスペリエンスを提供するには、計画、設計 (レスポンシブ)、開発 (特にフロント エンド) が重要です。

いくつかの素晴らしいサイトが構築されています。mediaqueri.esをご覧ください (ブラウザのサイズを変更してください)

などのアプローチが見られます。

  • 最初に大きな画面を表示し、次に小さなデバイスをターゲットにします。
  • 最初にモバイル、次にメディア クエリを使用して、より大きな画面に向けてスパイスを効かせます。
  • さまざまな手法によるデバイス検出 (サーバー側を含む)
  • まったく異なるマークアップとコンテンツをデバイスに提供します。

質問

今日は外で何をしているの?なぜあなたのアプローチを選択したのですか? 最も重要なのは、これに取り組むための最も効率的なアプローチではない場合、それは何ですか?

私が探しているもの:

  • それは純粋な CSS / JS / HTML アプローチなのか、それともサーバー側なのか、それともその組み合わせなのか - なぜですか?
  • 各デバイスは必要なリソース (画像など) のみを取得するため、パフォーマンスが向上します。
  • サイトのメンテナンスが簡単です。つまり、機能の追加/変更は大きな苦痛ではありません。
  • いくつかのコード サンプルは常に役立ちます
  • IE7以下のような古いクソブラウザは除外しましょう
0 投票する
2 に答える
129 参照

javascript - CSS / HTML / JS:モバイルレイアウトを持つWebサイトを構築する際の注意点

デバイスの画面サイズに応じてモバイルレイアウトを変える必要があるWebサイトを構築していますが、デバイスごとにまったく新しいレイアウトを設計する必要はありません。それで、モバイルレイアウトにうまく変換されないことに注意する必要があるものがあるかどうか疑問に思いましたか?または、オリジナルをセットアップして、より小さなデバイスにうまくスケーリングする方法。どうもありがとう

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

html - FoundationレスポンシブWebデザイン

ファンデーションを試しています。リンク: http://foundation.zurb.com/docs/index.php

私は非常に単純な Div を持っています:

高さを 190 ピクセルに設定すると、ブラウザーのサイズに関係なく 190 と表示されますが、高さを 100% に設定すると、50 ピクセルの画像しか表示されません。私は現在のサイトで背景画像になるものをたくさん使用していますが、それらの高さにも対応したいと思っています。どうすればこれを達成できますか?

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

javascript - 異なる画面解像度で異なる JavaScript を実行する

画面サイズが 768px 未満の場合にのみドロップダウン メニューの jQuery 関数を実行し、その値を超える場合は別のドロップダウン メニュー関数を実行する必要があります。JavaScriptでこれを行うにはどうすればよいですか?

0 投票する
12 に答える
54601 参照

iphone - iPhone のレスポンシブ Web サイト - 横向きから縦向きに回転する際の不要な空白

レスポンシブ Web サイトを作成していますが、iPhone で表示すると、コンテンツ ページに奇妙な動作があることに気付きました。縦向きモードでロードした場合、および横向きに回転した場合も正しくスケーリングされます。ただし、縦向きに戻すと、ページが左にシフトするか、正しくズームされないように見え、右側に空白の帯ができます。この空白は、ユーザーがページを左にスワイプできるため、縦向きでの最初の読み込み時にも存在するようです

説明をこれ以上複雑にするのではなく、この動作が発生しているサンプル ページへのリンクを次に示します。iPhone で見てから、この問題のないホームページを見てください。

さらに何かを見る必要がある場合は、私だけが知っています:)

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

css - CSS メディア クエリ: iPad での間違ったビューポート スケール

iPad の位置を縦向きから横向きに変更すると、ビューポートのスケールが正しくなくなります (ビューポートに対してサイトが大きすぎます)。私はたくさん検索して、lessframework.comで同じ問題を見つけました

見てみましょう — http://www.youtube.com/watch?v=MGDjaE-eKAY

しかし、stuffandnonsense.co.uk/projects/320andup/ では問題ありません。

iPadで320andupが正しく機能し、lessframework.comが正しく機能しない理由がわかりません。

何か案は?

0 投票する
5 に答える
7380 参照

media-queries - フレームレス グリッドを効果的に使用するには?

モバイル端末にも対応したウェブサイトの構築を開始しています。そのため、メディア クエリやさまざまなグリッド フレームワークの研究も開始しています。Inuit.css、セマンティック グリッドなどのすべての「メイン プレーヤー」を調べたところ、おそらくフレームレス グリッドが最適であることがわかりました。

著者は、「 Less Frameworkの精神的な後継者」であると述べています。

Ok。メインの framelessgrid.com ページ (フレームレス グリッドを実装する必要があります) の less/css コードと html コードをすべて調べましたが、実際にどのように実装できるかわかりません。

  • まず第一に、「フレームレス」とは正確には何を意味するのでしょうか? 単にフレームワークではないということですか?また、自由な列幅と「反転」メディア クエリを「モバイル ファースト」にする以外に、lessframework との違いは何ですか?

  • .less 変数 (特に @cols シリーズ) を正確に使用するにはどうすればよいですか?

  • 「ピクセルごとではなく、列ごとに適応する」とは何ですか。平均?この概念をどのように実践に移すべきでしょうか?

:)

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

javascript - レスポンシブ Web デザインでリソース ファイル (JS、CSS、画像) を提供するためのベスト プラクティス

Not Your Parent's Mobile Phone: UX Design Guidelines For Smartphones - Smashing Magazineの「Data Transfer and Pricing」セクションを読んでいるときに、以下のものが気になりました。

最近、レスポンシブ Web デザインについて多くのことが言われています。このアプローチでは、データ転送を最小限に抑えるといういくつかの課題が生じます。Jason Grigsby は、詳細について非常に優れた記事を書いています。要約すると、レスポンシブ デザインの魔法のソースの一部である CSS メディア クエリは、モバイル デバイスへのデータ転送のオーバーヘッドを軽減するためにほとんど何もしません。不要な画像のサイズを変更したり隠したりするには、完全な画像をブラウザーにダウンロードする必要があります。さらに、JavaScript ライブラリなどのリソースが、ユーザーに対して有効にされていなくても、モバイル デバイスにダウンロードされる可能性があります。

Smashing mag の記事で言及されている Jason Grigsby による長い記事を読んでいるときに、このような問題を回避するためのベスト プラクティスに従っている人がいるかどうかを知りたいです。

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

css - レスポンシブデザイン-パーセンテージとピクセルとems

さまざまな画面サイズに対応できるサイトの構築から始めています。列にパーセンテージを使用し、メディアクエリを使用して画面サイズに応じて調整するFluidBaselineGridテンプレートを使用しています。独自のカスタムCSSを追加しているので、要素の配置にピクセル、パーセンテージ、またはemsを使用する必要があるかどうか疑問に思っています(流体グリッド要素内)。たとえば、div間のマージンとパディング、入力フィールドの幅などです。測定にemsを使用するように設定されているのは、フォントサイズと行の高さだけです。

誰かがこれに関するポインタを提供できますか?現時点では、グリッドテンプレートで事前設定されているパーセンテージベースのレイアウト内のピクセルを使用することに傾倒しています。