23

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は何ですか？誰か説明してくれませんか？

4

2 に答える 2

11

React Flexbox Gridを使用して、Web サイトをレスポンシブにすることができます。これは、グリッド システムに続いてBootstrapから派生したものです。

グリッド システムは画面を 12 列に分割し、モバイル デバイス、タブレット、およびデスクトップのコンポーネントに使用できる幅を指定できます。xs、sm、md、lgおよびのブレークポイントは、 xl576px、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) { ... }
于 2017-04-17T05:34:55.913 に答える