web-dev-qa-db-fra.com

Quelle est la signification de xs, md, lg dans CSS Flexbox system?

Je développe une application en utilisant React et je voulais styliser des composants, j'ai trouvé https://roylee0704.github.io/react-flexbox-grid/ qui parle d'une grille fluide système. L'exemple ressemble à:

<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>

et je ne sais pas ce qui est xs, sm et lg est? Quelqu'un pourrait-il expliquer?

cssreactjsflexboxreact-flexbox-grid
10
daydreamer

Supposons que notre écran soit divisé en 12 Colonnes.

La partie xs est utilisée lorsque l'écran est très petit, de même pour les classes petites, moyennes et grandes, en fonction de leur définition de taille d'écran respective en CSS.

L'exemple que vous avez fourni:

<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>

Pour notre bien, supposons que ces trois colonnes soient nommées comme col-1, col-2 et col-3

Sur un petit écran supplémentaire:

col-1 occupe les 12 colonnes et les deux autres en prennent 6 chacune (sur une nouvelle ligne) enter image description here

Sur les petits écrans

col-1 et col-3 en prend 3, tandis que celui du milieu col-2 prend 6 enter image description here

De même

Écrans moyens enter image description here

Grands écrans enter image description here

P.S. Les images sont des captures d'écran du lien que vous avez fourni (en redimensionnant le navigateur pour chaque taille d'écran)

22
Jones Joseph

React Flexbox Grid peut être utilisé pour rendre votre site Web réactif. Il est dérivé du système de grille suivi de Bootstrap .

Le système de grille divise l'écran en 12 colonnes et vous pouvez mentionner la largeur pouvant être prise pour les composants des appareils mobiles, des tablettes et des ordinateurs de bureau. Les points d'arrêt pour xs, sm, md, lg et xl sont 576px, 768px, 992px et 1200px.

Vous pouvez voir la différence en redimensionnant la fenêtre du navigateur de la page https://roylee0704.github.io/react-flexbox-grid/

C'est la même chose que la requête média ci-dessous

// 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