Início / coding / Perguntas / 79166592
Accepted
Kaffa
Asked: 2024-11-07 21:08:29 +0800 CST

Por que a função css mod() 2 às vezes mostra os resultados 2 quando a janela do navegador é redimensionada?

  • 772

O código mostra 0 e 1, e por que às vezes mostra 2?

Meu navegador é o Microsoft Edge v130, e o Chrome v130 faz o mesmo.

@property --vw {
  syntax: "<length>";
  inherits: true;
  initial-value: 100vw;
}
:root {
  --w: mod(tan(atan2(var(--vw), 1px)), 2);
}
body::before {
  counter-reset: w var(--w);
  content: counter(w);
}
<body></body>

css

2 respostas

  1. Best Answer

    Quando você usa calcou outra função CSS, pode ser difícil ver qual é o valor computado. Se você fizer isso, getComputedStyle(document).getPropertyValue("--w")você só obtém a fórmula, não o valor.
    Um truque para ver qual é o valor computado é atribuí-lo a uma propriedade real. Como sua --wpropriedade não tem uma unidade, você pode atribuí-la a line-height.

    body {
  font-size: 1px;
  line-height: var(--w);
}

    Agora, você pode ver o valor, que pode ser, por exemplo, 1,99. A counter-resetpropriedade aceita apenas números inteiros e 2 é "próximo o suficiente".

    Você pode usar round() para arredondar o número (para cima, para baixo, para o inteiro mais próximo ou para zero):

    :root {
  --w: mod(round(nearest, tan(atan2(var(--vw), 1px)) ), 2);
}

    (Ele round()também pode ir para fora do mod(), o que fizer sentido para você)

    • 4

  2. O motivo pelo qual seu código às vezes mostra 2 em vez de 0 ou 1 é devido a números de ponto flutuante. Você pode tentar usar min

        :root {
  --w: round(mod(nearest, tan(atan2(var(--vw), 1px)) ), 2);
}

    ou

    :root {
      --w: mod(round(nearest, tan(atan2(var(--vw), 1px)) ), 2);
    }
    • 0

relate perguntas