Qual é o Significado de xs, md, lg no sistema CSS Flexbox?
estou a desenvolver uma aplicação usando {[[1]} e queria estilizar componentes, encontrei https://roylee0704.github.io/react-flexbox-grid que fala de um sistema de grelha de fluidos. O exemplo parece:
<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 e qual é? Alguém pode explicar?
2 answers
A parte xs ocupa-se quando o ecrã é extra pequeno, igualmente pequeno, médio e grande classes, com base na respectiva definição de tamanho de ecrã em CSS.
O exemplo que forneceu:
<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>
col-1, col-2 e col-3
Num ecrã extra pequeno:
col-1 ocupa todas as 12 colunas e as outras duas de cada um deles tomar 6 (em uma nova linha)
Em ecrãs pequenos
col-1 e col-3 toma 3, enquanto o do meio col-2 toma 6
Similarmente
Ecrãs médios
Ecrãs grandes
P. S. as imagens são imagens do link que forneceu (redimensionando o navegador para cada tamanho do ecrã)
Reat Flexbox Grid pode ser usado para tornar o seu site sensível. É derivado do sistema de grelha seguido de Bootstrap.
O sistema de grelha divide o ecrã em 12 colunas e pode mencionar a largura que pode ser tomada para componentes em dispositivos móveis, tablets e ecrãs. Os pontos de interrupção para xs, sm, md, lg e xl são 576px, 768px, 992px e 1200px.
Você pode ver a diferença, redimensionando a janela do navegador da página https://roylee0704.github.io/react-flexbox-grid/
É o mesmo que a pesquisa mediática abaixo
// 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) { ... }