5

私はレスポンシブ デザインを初めて使用します。現在、twitter ブートストラップの Respond.css をいじっています。そして、私のプロジェクトでいくつかの問題が発生しています。

問題は、私の左の列が (正しい用語であれば) 崩れないか、積み上げられないことです。私が欲しいのは、左の列がspan8列の下に移動し、幅のサイズを変更することです。今のところ、左の列の幅が狭くなり、その中にすべての内容が詰め込まれています。768x1024 メディア画面のモバイル画面サイズをターゲットにしています。

レイアウトの基本的なマークアップは、左が span8 で右が span4 です。span4 は私の他のブロックがある場所です。

<div class="row">
<div class="span8">
    some block with contents
</div>

<div classs="span4">
    <div class="sideBlock"><!--fluid width was set-->
        <img src="http://placehold.it/298x77">
    </div>
</div>

私の主な質問は、メディア クエリを使用して (Twitter ブートストラップを使用して) 特定の画面サイズをターゲットにする方法です。そして、ニーズに合わせてカスタマイズしますか?

4

5 に答える 5

19

Bootstrap を使用しているため、デフォルトの変数を使用して特定の画面サイズをターゲットにします。

// Extra small screen / phone
$screen-xs:                  480px !default;

// Small screen / tablet
$screen-sm:                  768px !default;

// Medium screen / desktop
$screen-md:                  992px !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;

例：

@media (min-width: $screen-sm) and (max-width: $screen-md) {
    /*
     * styles go here
     */
}
于 2014-07-23T21:45:06.633 に答える
15

ブログの記事や回答済みのスタック オーバーフローの質問、およびこの質問に対するコメントから投稿された記事を読んで、ようやくこれを入手しました。

モバイル デバイス用の一般的なブレークポイントとビューポート (大きなデスクトップ用の 1200px 幅のビューポート) に基づいて、メディア クエリに独自のスタイルを挿入する必要があります。

いえ、@media (min-width) {mystyle here}

@media (min-width: 1200px) {
      .myContainer {
           width: 960px;
           margin: 0 auto;

      }
      .myleftBlock-should-collapse {
           float: none;
           width: 100%;
      }

 }

Twitter Bootstrap Responsive.css ファイルを使用しているため、特定のビューポートのメディア クエリをカスタマイズして、デザインのニーズに適合させる必要があります。

私は 960px の固定幅を設計しているので、.container クラスと span クラスの幅をカスタマイズして再計算します。ベース幅 960px からパーセント ベースにピクセルを変換します。

したがって、特定のビューポートで折りたたんだり、非表示にしたり、表示したりするブロックまたは要素は、メディアクエリ内でそれに応じてスタイル設定する必要があります。

そして...レスポンシブデザインについて新たに学んだこと。画面サイズは Viewport とは異なります。

于 2012-08-13T05:01:12.520 に答える
1

Bootstrap の行流体クラスの例は、ここにあります http://getbootstrap.com/2.3.2/examples/fluid.html

Visual Studio で CSS を支援したい場合は、http://bootswatch.com から LESS ファイルを取得し、Twitter.Bootstrap.Less nuget パッケージを取得します。次に、以下を bootswatch.less ファイルに追加します

@import url("bootstrap/bootstrap.less");

'Foundation' http://foundation.zurb.com/develop/download.html#customizeFoundationと呼ばれる、Boostrap 列流体に代わるものがあります。

「小さい」メディアと「大きい」メディアなどの定義があります。

<div class="show-for-small" style="text-align: center">
    <a href="#">Desktop here</a>
</div>
<div class="large-4 columns hide-for-small">
    <a href="#">
        <div class="panel radius callout" style="text-align: center">
        <strong>Mobile here</strong>
        </div>
    </a>
</div>
于 2014-08-13T05:06:31.883 に答える
0

Bootstrap のレスポンシブ部分を利用するには、 row-fluid(クラスの代わりに) クラスを使用する必要があります。row詳しくはhttp://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystemをご覧ください。

したがって、基本的なレイアウトは次のようになります。

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>
于 2012-08-12T13:15:14.423 に答える
0

さらに興味深い機能の 1 つは、タグのメディア属性でメディア クエリを使用できることです。<link>

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 768px)">

これにより、メディア属性 に関係なく、ブラウザーはすべての CSS リソースをダウンロードします。違いは、media 属性の media-query がfalseと評価された場合、その .css ファイルとそのコンテンツはレンダリング ブロックにならないことです。

したがって、より優れたユーザー エクスペリエンスが保証されるため、タグでmedia属性を使用することをお勧めします。<link>

ここで、この問題に関する Google の記事を読むことができますhttps://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

メディアクエリに従って、CSS コードを異なるファイルに自動で分離するのに役立ついくつかのツール

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

于 2019-01-13T19:56:05.653 に答える