Este artigo foi publicado pela primeira vez na conta pública do WeChat: Big Move to the World, meu WeChat: qq449245884, compartilharei com você as tendências do setor de front-end, métodos de aprendizado etc. o mais rápido possível. Para mais trabalhos de código aberto, consulte GitHub github.com/qq449245884… , incluindo os sites de teste completos, materiais e minha série de artigos para entrevistas com fabricantes de primeira linha.
As funções de comparação de CSS são suportadas desde abril de 2020, adoro usar essas funções, mas a minha favorita é clamp()que também é a que mais uso. Nesta lição, veremos essas funções de comparação em detalhes.
Funções Clamp(), Max() e Min()
clamp()A função da função é limitar um valor entre um limite superior e um limite inferior. Quando o valor ultrapassar a faixa dos valores mínimo e máximo, selecione um valor entre os valores mínimo e máximo a ser utilizado. Aceita três parâmetros: valor mínimo, valor preferencial, valor máximo.
Dimensionamento e posicionamento de fluidos
No exemplo abaixo, há um estilo de telefone com duas imagens colocadas nele, assim:
Quando a largura do container fica menor, precisamos reduzir o tamanho da imagem para que ela não se deforme. Geralmente é resolvido usando unidades de porcentagem, por exemplo width: 20%, mas dessa forma não nos dá muito controle.
Queremos poder ter um tamanho de fluido que exija um valor mínimo e máximo, clampe é aí que entra o campo.
.section-image {
width: clamp(70px, 80px + 15%, 180px);
}
复制代码Endereço do caso: codepen.io/shadeed/pen…
elementos decorativos
Às vezes, precisamos adicionar alguns elementos decorativos nos cantos da página, e os elementos decorativos precisam ser responsivos, por exemplo, o lado do PC é assim (pontos pretos):
Então fica assim no lado móvel:
Para fazer isso, podemos usar consultas de mídia:
.decorative--1 {
left: 0;
}
.decorative--2 {
right: 0;
}
@media (max-width: 600px) {
.decorative--1 {
left: -8rem;
}
.decorative--2 {
right: -8rem;
}
复制代码Enquanto isso funciona, podemos fazer uma clamp()função , que é mais concisa:
.decorative--1 {
left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
.decorative--2 {
right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
}
复制代码Endereço do caso: codepen.io/shadeed/pen…
altura do fluido
Às vezes, a altura da área principal da nossa página precisa mudar de acordo com o tamanho da janela de visualização. Nesse cenário, tendemos a mudar isso por meio de consultas de mídia ou usando unidades de viewport.
.hero {
min-height: 250px;
}
@media (min-width: 800px) {
.hero {
min-height: 500px;
}
}
复制代码Também podemos misturar valores fixos e unidades de viewport:
.hero {
min-height: calc(350px + 20vh);
}
@media (min-width: 2000px) {
.hero {
min-height: 600px;
}
}
复制代码但需要注意在较大的视口上高度不能太过高，所以我们需要设置一个最大高度,使用CSS clamp()，我们可以只用一个CSS声明来设置最小、首选和最大高度。
.hero {
min-height: clamp(250px, 50vmax, 500px);
}
复制代码当调整屏幕大小时，我们会看到，高度会根据视口宽度逐渐改变。在上面的例子中，50vmax表示着视口最大尺寸的 50%。
Loading Bar
进度条一般是从左到右一个加载过程，在 CSS 中，我们可以定位在左边：
.loading-thumb {
left: 0%;
}
复制代码为了将进度条定位到最右边，我们可以使用 left: 100%，但这会带来一个问题。进度条会跑到容器外：
.loading-thumb {
left: 100%;
}
复制代码这是正常的情况，100% 是从进度条的末端开始的，而进度条本身也有自己的宽度，所以实际宽度会大于容器的宽度。
我们可以使用 calc() 来减去的进度条宽度，这样就可以了，但这并不是100%有效：
.loading-thumb {
/* 40px represents the thumb width. */
left: calc(100% - 40px);
}
复制代码我们来看下，如何利用CSS变量和比较函数来更好地实现：
.loading-thumb {
--loading: 0%;
--loading-thumb-width: 40px;
position: absolute;
top: 4px;
left: clamp(
0%,
var(--loading),
var(--loading) - var(--loading-thumb-width)
);
width: var(--loading-thumb-width);
height: 16px;
}
复制代码上面的步骤如下：
- 首先，我们设定一个最小值为
0% - 首选值是
--loadingCSS变量的当前值 - 最大值代表当前的加载量减去进度条件的宽度
这里的CSS clamp()为我们提供了这个组件的三种不同的状态信息，这个方案很 nice:
不仅如此，我们还可以以相同的方式来处理不同UI
.loading-progress {
width: clamp(10px, var(--loading), var(--loading) - 10px);
}
复制代码最小值等于圆圈宽度的一半，首选值是当前的加载百分比，最大值是当前百分比与圆圈一半的减去结果。
动态分割器
考虑下图，我们在两个区域之间有一个行分隔符。
在移动端上，这个分隔符应该变成水平的，如下图：
我的解决方案是使用一个边框和flex。思路是，边框作为伪元素，以填补垂直和水平状态的可用空间：
.section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.section:before {
content: "";
border: 1px solid #d3d3d3;
align-self: stretch;
}
@media (min-width: 700px) {
.section {
align-items: center;
flex-direction: row;
}
}
复制代码我们也可以使用 clamp 而不需要媒体查询的解决方案：
.section {
--breakpoint: 400px;
display: flex;
flex-wrap: wrap;
}
.section:before {
content: "";
border: 2px solid lightgrey;
width: clamp(0px, (var(--breakpoint) - 100%) * 999, 100%);
}
复制代码来剖析一下上面的CSS:
- 0px: Valor mínimo, usado para separadores verticais. Seu valor é
0porque estamos usando uma borda CSS (var(--breakpoint) - 100%) * 999é um alternador que alterna entre0pxou100%.
Raio da borda dinâmica
Um ano atrás, descobriu um truque CSS legal. Use uma função CSS para alternar o cartão de para max(), com base na largura da janela de visualização .border-radius0px8px
.card {
border-radius: max(
0px,
min(8px, calc((100vw - 4px - 100%) * 9999))
);
}
复制代码Vamos dissecar o CSS acima:
-
Temos uma
max()função que compara entre os0pxvalores calculados de e e escolhe o maior valor.min() -
min()8pxA funçãocalc((100vw - 4px - 100%) * 9999compara entre os valores calculados de e , o que resulta em um número positivo ou negativo muito grande. -
9999é um número grande, tal quemino valor de8px
espaçamento
Às vezes, podemos precisar alterar o espaçamento de um componente ou de uma grade com base na largura da janela de visualização. Com a função CS é diferente, só precisamos definir uma vez.
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: min(2vmax, 32px);
}
复制代码Os bugs que podem existir após a implantação do código não podem ser conhecidos em tempo real. Para resolver esses bugs posteriormente, muito tempo é gasto na depuração de log. A propósito, recomendo uma ferramenta útil de monitoramento de bugs , o Fundebug .
Fonte: isdeed.com/article/use…
comunicar
Se você tem sonhos e produtos secos, você pode procurar por [Great Move to the World] no WeChat e prestar atenção nesse Shawanzhi que ainda está lavando pratos nas primeiras horas da manhã.
Este artigo GitHub github.com/qq449245884... foi incluído, há sites de testes completos, materiais e minha série de artigos para entrevistas com fabricantes de primeira linha.