web-dev-qa-db-ja.com

CSSのxs、md、lgの意味は何ですかFlexbox system？

Reactを使用してアプリケーションを開発していて、コンポーネントのスタイルを設定したいのですが、流体グリッドについて話している https://roylee0704.github.io/react-flexbox-grid/ を見つけましたシステム。例は次のようになります。

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

xs、sm、lgが何であるかわかりませんか？誰かが説明してもらえますか？

cssreactjsflexboxreact-flexbox-grid
10
daydreamer

画面が12列に分割されていると仮定します。

xsの部分は、CSSでのそれぞれの画面サイズ定義に基づいて、画面が非常に小さい場合、同様に小、中、大のクラスでも使用されます。

あなたが提供した例：

<Row>
  <Col xs={12} sm={3} md={2} lg={1} />
  <Col xs={6} sm={6} md={8} lg={10} />
  <Col xs={6} sm={3} md={2} lg={1} />
</Row>

ここでは、これらの3つの列の名前をcol-1、col-2、col-3と仮定します。

非常に小さい画面：

col-1は12列すべてを使用し、残りの2列は（新しい行で）それぞれ6列を使用します enter image description here

小さな画面の場合

col-1とcol-3は3を使用しますが、真ん中のcol-2は6を使用します enter image description here

同様に

中型スクリーンenter image description here

大画面enter image description here

P.S。画像は、提供したリンクのスクリーンショットです（画面サイズごとにブラウザのサイズを変更します）。

22
Jones Joseph

React Flexbox Grid を使用して、Webサイトを応答可能にすることができます。これは、グリッドシステムから派生し、 Bootstrap が続きます。

グリッドシステムは画面を12列に分割し、モバイルデバイス、タブレット、およびデスクトップのコンポーネントにどれだけの幅を確保できるかを説明できます。 xs、sm、md、lg、xlのブレークポイントは、576px、768px、992px、1200pxです。

ページのブラウザウィンドウのサイズを変更すると、違いを確認できます https://roylee0704.github.io/react-flexbox-grid/

以下のメディアクエリと同じです

// xs --- Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap

// sm --- Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// md --- Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// lg --- Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// xl --- Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
4
Lini Susan V