响应 CSS 101 - 断点
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
响应和适应视口布局的能力或“响应者” 。 Uma das formas comuns de se fazer issoera usando @mediacom o Breakpoint mobile mais apropriado da época and construindo àpartir dele.
断点以外的形式存在
断点
断点是在布局结束时max-width进行划分的重要因素min-width。重要的价值是作为大多数公共处置的主要因素而达成的共识。
👍 Prós
- 在设计系统中设置断点。
- 设计师可以根据不同的需求对场地进行预视。
- 确保所有大众都可以任意处置。
- 请注意 CSS 的相关内容。
✋ 反派
- 问题是“tá quebrando no meu dispositivo”acaba sendo solucionado com oversões ou mais um Breakpoint。
- 限制了导航和自动容器布局的能力。
- Exige CSS extra e as vezes HTML também。
使用还是不使用断点？
设置断点
Não dá pra falar断点sem falar中断。请不要在 quebra 的桥上重新构建网站，而这不是quebrar 的。不要<=786px因为侧边栏横向位置而导致断点，从而导致布局发生变化。
👍 Quando usar breakpoints
- 精确定制体验并确定配置。
- 根据布局的具体要求，我决定视口的位置。
- 确定特定于特定可视化的 CSS 参数。
- 您可以使用 CSS 框架来实现逻辑功能。
✋ Quando não usar 断点
- Porque o xpto usa.
- 请不要忘记。
联赛修订时间
除了在布局中设置多个断点之外，您还可以使用Pinterest 上的示例<div>布局。
该布局不是原型，而是在平板电脑和网络上没有视口的原型演示。
在互联网和 criá-los、vamos 分析或布局上设置 3 个断点：
- O 卡主要布局为宽屏和平板电脑，没有移动布局，主要为垂直布局。
- Não há mudança 大量的卡 que ocupam uma coluna só, eles se mantém o mesmo de acordo com o grid。
- 与第一轮比赛相比，第二轮比赛的元素更加丰富，尤其是美国网格。如果将 Flexbox 预定义或定义为固定弹性项目，则使用 %
flex-basis或不使用<div>HTML 作为“列”，从而对非 HTML 自然产生负面影响。
马克桑
最初的营销很简单，我们列出了卡片的顺序：
<ul class="layout">
<li class="card">1</li>
<li class="card">2</li>
<li class="card">3</li>
<li class="card">4</li>
<li class="card">5</li>
</ul>
CSS 初始
* { padding: 0; margin: 0; }
body {
min-block-size: 100vh;
background-color: #ccc;
padding: 2ch;
}
.layout {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(320px, 1fr)
);
gap: 2ch;
height: 100vh; width: 100%;
list-style-type: none;
}
.card:nth-child(1) { background-color: #BFDAF1; }
.card:nth-child(2) { background-color: #C1EACF; }
.card:nth-child(3) { background-color: #EFD1D0; }
.card:nth-child(4) { background-color: #F2E2C7; }
.card:nth-child(5) { background-color: #CDCCE9; }
-
min-block-size: 100vh;没有主体 diz que o tamanho minimo do eixo-y（块）é de 100vh（视口高度）。这是身体的显性表现，它是当今世界的最高目标，也是必要的。 -
Em是一种常用参数算法的
.layout功能。 Isso sinaliza o Repeat que ao invés de repetir uma quantidade x de vezes, ele crie Quantas colunas couberem no espaço disponível dele.repeat()auto-fit -
您
minmax(320px, 1fr)可以在最小的 320 像素大小的情况下，将主要的空间放置在空间中。
🧐 Se ficou dúvidas, falo mais sobre esse algoritmo delayout no meu artigo sobre CSS Grid (link abaixo).
布局结果：
功能！ Mas temos alguns 有问题。
- O primeiro card tem que ocupar 2 colunas。
- 布局不得与 3 列相对应。
- O primeiro 卡 precisa ser maior 没有手机
O primeiro 卡 tem que ocupar 2 列
Como estamos usando grid，basta usar grid-columnno card pra dizer a ele quantas colunas ele ocupa。
.card:nth-child(1) {
grid-column: span 2;
}
结果：
O 布局不适合 3 列
Acima de 1320px 布局经过 4 列。将 1320 像素的 3 张卡 430 像素 (1290 像素) + 间隙 (2 * 16 像素) 设置为 4 张卡，然后重新调整 4 张卡的尺寸 320 像素。
Pra alterar como o layout se comporta depois dessa lagura, criamos um Breakpoint:
@media (min-width: 1320px) {
.layout {
grid-template-columns: repeat(3, minmax(320px, 1fr));
}
}
另一种方法是使用 CSS 来更改属性的值：
.layout {
/* código omitido */
grid-template-columns: repeat(
var(--index, auto-fit),
minmax(320px, 1fr)
);
/* código omitido */
}
/* Breakpoint injetando o --index no .layout */
@media (min-width: 1320px) {
.layout { --index: 3; }
}
O primeiro 卡 precisa ser maior 没有手机
Precisamos que quando couber apenas uma coluna, que o primeiro card tenha a altura maior, cobrindo 100vhda tela.
Pensando no exemplo front, podemos criar uma variável --columnpro grid-columndo primeiro card, que será span 2quando em um viewport maior, mas 1 / -1quando em apenas uma coluna.
📝
1 / -1é utilizado nogrid-column, significando que você quer que a coluna comece da primeira e vá até a última, independente de quantas colunas tenham.
/* Alteramos o valor de grid-column do card pra uma variável com valor default de `span 2` */
.card:nth-child(1) {
grid-column: var(--column, span 2);
}
/* Redesignamos o valor dela dentro da media query */
@media (max-width: 720px) {
.card { --column: 1 / -1; }
.card:first-child { height: 100vh; }
}
📝 使用 CSS 变量可以快速检索和编辑媒体查询中的特定菜单项，并选择适当的选择器和不相关的功能。
最终结果：
最后
我们将重点关注公众发起的行动，并迅速做出回应。它可以启动我们的媒体查询、CSS 或框架的黑客攻击，但这些都不是错误的。
布局算法非常复杂，包括实用性、节奏性和休闲性。如果你觉得困难重重，你可以尝试一下，然后再进行 4 次练习。
请参阅冈比亚媒体查询。 O ponto do post é que você não precisa ser so bom em gambiarra, se você quiser. CSS 可以提供持久性。
文章来源：https://dev.to/lixeletto/responsividade-css-101-breakpoints-1c06