0

私は Twitter Bootstrap をレスポンシブ デザインで使用しているため、ほぼすべてのデバイス/画面サイズまたは密度で、すべての Bootstrap 要素の寸法/フォント サイズが画面サイズに適合します。

しかし、私自身の非フレームワーク要素はどうですか? レスポンシブ デザインに従い、同じように見えるようにするには、どのようにスタイルを設定すればよいですか? たとえば、画像。デスクトップコンピュータと携帯電話の両方で同じように見えるようにするには、どのような寸法とスタイルにする必要がありますか?

250x250px の画像でこの問題が発生しました。私のデスクトップ コンピューターのモバイル Web サイト エミュレーターでは、画面の半分以上を占めていました (エミュレーターは、エミュレートされたデバイスの中規模の画面サイズを想定しています)。しかし、Galaxy Nexus (巨大な XHDPI 画面密度) でこのページを開くと、250x250px の画像は非常に小さく見えました。

サイズだけが問題ではありません。上記画像の余白・パディングの設定方法。そのため、ページは多くのデバイスでまったく同じように見えます。その画像をデスクトップ コンピューター/フル HD スクリーンに表示すると、2000 px 近くの幅になります。縦向きモードの Galaxy Nexus では、使用する幅が 1000 ピクセル未満になります。

私はCSSの中程度または初心者であり、モバイル開発/レスポンシブデザインについては完全に無知（初心者）であるため、この質問はばかげているように思えるかもしれません. ごめん！

4

1 に答える 1

2

ビューポートに基づいてすべてを自動的にプロポーショニングするメタタグを使用するだけです。

<meta content="width=device-width, initial-scale=1.0" name="viewport">

上記の行を<head>タグに配置すると、余白、パディング、テキストが見栄えが良くなります。

画像もプロポーショナルである必要がありますが、bodyまたは大きなdivsの大きな背景画像などの場合は、「正しい」画像を取り込むようにbootstrap-response.cssファイルを変更する必要があります。そのため、デスクトップや大型ラップトップの場合は大きな背景画像、タブレットの場合は別の場所にある中サイズの画像、スマートフォンの場合はシームレスなパターン画像が必要になる場合があります。ファイルの@media部分を探して、cssを追加/編集するだけです。

于 2013-02-14T21:34:52.460 に答える