Deja de jugar con el código CSS y prueba estas útiles funciones

Este artículo se publicó por primera vez en la cuenta pública de WeChat: Daqian World, mi WeChat: qq449245884. Compartiré con ustedes las tendencias de la industria front-end, los métodos de aprendizaje, etc. lo antes posible. Para obtener más trabajos de código abierto, consulte GitHub github.com/qq449245884… , incluidos los sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primer nivel.

Las funciones de comparación de CSS se admiten desde abril de 2020, me encanta usar estas funciones, pero mi favorita es clamp()que también es la que más uso. En esta lección, veremos estas funciones de comparación en detalle.

Funciones Clamp(), Max() y Min()

clamp()La función de la función es limitar un valor entre un límite superior y un límite inferior. Cuando el valor exceda el rango de los valores mínimo y máximo, seleccione un valor entre los valores mínimo y máximo para usar. Acepta tres parámetros: valor mínimo, valor preferido, valor máximo.

Dimensionamiento y posicionamiento de fluidos

En el siguiente ejemplo, hay un estilo de teléfono con dos imágenes colocadas en él, así:

Cuando el ancho del contenedor se vuelve más pequeño, necesitamos reducir el tamaño de la imagen para que no se deforme. Generalmente se resuelve usando unidades de porcentaje, por ejemplo width: 20%, pero de esta manera no nos da mucho control.

Queremos poder tener un tamaño fluido que requiera un valor mínimo y máximo, y clampahí es donde entra el campo.

.section-image {
  width: clamp(70px, 80px + 15%, 180px);
}
复制代码

Dirección del caso: codepen.io/shadeed/pen…

elementos decorativos

A veces, necesitamos agregar algunos elementos decorativos en las esquinas de la página, y los elementos decorativos deben ser receptivos, por ejemplo, el lado de la PC es así (puntos negros):

Entonces se ve así en el lado móvil:

Para hacer esto, podemos usar consultas de medios:

.decorative--1 {
  left: 0;
}

.decorative--2 {
  right: 0;
}

@media (max-width: 600px) {
  .decorative--1 {
    left: -8rem;
  }

  .decorative--2 {
    right: -8rem;
  }

复制代码

Mientras esto funciona, podemos hacer una clamp()función , que es más concisa:

  .decorative--1 {
    left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

  .decorative--2 {
    right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }
复制代码

Dirección del caso: codepen.io/shadeed/pen…

altura del fluido

A veces, la altura del área principal de nuestra página debe cambiar según el tamaño de la ventana gráfica. En este escenario, tendemos a cambiar esto a través de consultas de medios o utilizando unidades de ventana gráfica.

.hero {
  min-height: 250px;
}

@media (min-width: 800px) {
  .hero {
    min-height: 500px;
  }
}
复制代码

También podemos mezclar valores fijos y 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%。

事例地址：codepen.io/shadeed/pen…

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%
首选值是 --loading CSS变量的当前值
最大值代表当前的加载量减去进度条件的宽度

这里的CSS clamp()为我们提供了这个组件的三种不同的状态信息，这个方案很 nice:

不仅如此，我们还可以以相同的方式来处理不同UI

.loading-progress {
  width: clamp(10px, var(--loading), var(--loading) - 10px);
}
复制代码

最小值等于圆圈宽度的一半，首选值是当前的加载百分比，最大值是当前百分比与圆圈一半的减去结果。

事例地址：codepen.io/shadeed/pen…

动态分割器

考虑下图，我们在两个区域之间有一个行分隔符。

在移动端上，这个分隔符应该变成水平的，如下图：

我的解决方案是使用一个边框和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 verticales. Su valor se 0debe a que estamos usando un borde CSS
(var(--breakpoint) - 100%) * 999es un conmutador que alterna entre 0pxo 100%.

Borde dinámico Radio

Hace un año, descubrí un ingenioso truco CSS. Use una función CSS para cambiar la tarjeta de a max(), según el ancho de la ventana gráfica .border-radius0px8px

.card {
  border-radius: max(
    0px,
    min(8px, calc((100vw - 4px - 100%) * 9999))
  );
}
复制代码

Analicemos el CSS anterior:

Tenemos una max()función que compara entre los0px valores calculados de y y elige el valor mayor.min()
min()8pxLa función calc((100vw - 4px - 100%) * 9999compara entre los valores calculados de y , lo que da como resultado un número positivo o negativo muy grande.
9999es un número grande, tal que minel valor de8px

espaciado

A veces, es posible que necesitemos cambiar el espaciado de un componente o una cuadrícula en función del ancho de la ventana gráfica. Con la función CS, es diferente, solo necesitamos configurarlo una vez.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: min(2vmax, 32px);
}
复制代码

Los errores que pueden existir después de que se implementa el código no se pueden conocer en tiempo real. Para resolver estos errores después, se dedica mucho tiempo a la depuración de registros. Por cierto, recomiendo una herramienta útil de monitoreo de errores , Fundebug .

Fuente: isdeed.com/article/use…

comunicar

Si tiene sueños y productos secos, puede buscar [Great Move to the World] en WeChat y prestar atención a este Shawanzhi que todavía está lavando platos en las primeras horas de la mañana.

Se ha incluido este artículo GitHub github.com/qq449245884... , hay sitios de prueba completos, materiales y mi serie de artículos para entrevistas con fabricantes de primera línea.