在我的CSS文件的calc()函数中，是否可以进行平方根函数？我读过calc()仅支持基本运算符，如+ - *和/。
理想情况下，它应该看起来像这样：
width: calc(50% - (sqrt(7200))px);
如果calc()函数没有sqrt功能，我该怎么办？
4个回答
27
正如其他人建议的那样，如果处理重复值，只需使用预处理器，或直接从计算器中复制/粘贴，例如sqrt（2）= 1.4142135623730950488016887242097。
但是如果你真的必须使用一种动态方式在CSS中动态计算平方根而不需要JS，这当然是可行的。虽然5位精度对于大多数情况来说已经足够了，但对于你的示例中的数字7200，我们应该将其提高到9位以上的精度，除非你能做出更接近结果的初始猜测，但现在还不可能。
但是没有优化的话，如果使用其他答案/建议生成的输出，这将使您的文档膨胀50000个以上字符。
由于我们是动态使用它，因此我们应该使用CSS变量，这会稍微限制浏览器的兼容性，但它已经在现在（2018年3月）全局支持约88％。
我们开始吧：
#test {
--number: 7200;
--guess01: calc((var(--number) + ( var(--number) / var(--number))) / 2);
--guess02: calc((var(--guess01) + ( var(--number) / var(--guess01))) / 2);
--guess03: calc((var(--guess02) + ( var(--number) / var(--guess02))) / 2);
--guess04: calc((var(--guess03) + ( var(--number) / var(--guess03))) / 2);
--guess05: calc((var(--guess04) + ( var(--number) / var(--guess04))) / 2);
--guess06: calc((var(--guess05) + ( var(--number) / var(--guess05))) / 2);
--guess07: calc((var(--guess06) + ( var(--number) / var(--guess06))) / 2);
--guess08: calc((var(--guess07) + ( var(--number) / var(--guess07))) / 2);
--guess09: calc((var(--guess08) + ( var(--number) / var(--guess08))) / 2);
--guess10: calc((var(--guess09) + ( var(--number) / var(--guess09))) / 2);
width:calc(50% - (var(--guess10) * 1px));
height:200px;
background: black;
padding:20px;
color:#fff;
}<div id="test">Width is 50% - sqrt(7200) in px</div>- mountarreat
1
2这是一个非常好的答案，它实际上让您可以使用CSS变量进行平方根计算，这对响应式设计中的动态计算，尤其是间距和字体非常有用。做得很好。希望能够看到指数的相似解决方案。 - limitlessloop
9
根据这里的规范 http://www.w3.org/TR/css3-values/#calc
calc() 函数允许在组件值中使用加法（‘+’）、减法（‘-’）、乘法（‘*’）和除法（‘/’）等数学表达式。‘calc()’表达式表示它所包含的数学计算结果，使用标准运算符优先级规则。 它可用于任何允许使用
<length>、<frequency>、<angle>、<time>、<number>或<integer>值的地方。‘calc()’表达式的组成部分可以是字面量值、‘attr()’ 或 ‘calc()’表达式，或解析为前述类型之一的值。
因此，目前无法直接在css中计算平方根..遗憾 :(
- Nedudi
5
我相信您对动态计算一个数的平方根很感兴趣。与普遍的观点不同的是，您应该能够仅使用calc近似计算一个数的平方根。不幸的是，在现实中（或至少在chrome中），css的最伟大之物calc非常受限，无法使用2个变量乘数进行乘法或除法运算。在理想的情况下，以下方法可以实现。请点击运行代码段。
var nth=document.getElementById('nth'),
percision=document.getElementById('percision'),
counter=document.getElementById('counter'),
input=document.getElementById('input'),
output=document.getElementById('output');
percision.oninput = function(){
counter.innerText = percision.value;
};
//var base = "(X+A/X)/2";
var base = 'calc(calc(X + calc(A / X)) / 2)';
(nth.onchange = percision.onchange =
input.onchange = function(){
nth.value = parseInt(nth.value);
counter.innerText = percision.value;
var cur=base, i=percision.value;
while (i--){
cur = cur.replace(/X/g, base);
}
cur = cur.replace(/A/g, input.value)
.replace(/X/g, '1');
output.value = cur;
})();body, body *:not(script) {
white-space: nowrap;
margin-top: 4px;
margin-top: 4px;
font-family: monospace;
}
h1 {
text-align: center;
margin-bottom: 10px;
}
#nth {
width: 64px;
text-align: center;
}
nthText {
visibility: hidden; /* not yet implemented */
display: none;
}
#percision {
width: 192px;
}
#input {
width: calc(100% - 154px);
}
textarea {
max-height: 64px;
min-width: calc(100% - 10px);
width: calc(100% - 10px);
max-width: calc(100% - 10px);
white-space: initial !important;
}<h1 style="text-align:center">CSS sqrt function generator</h1>
<nthText>Nth root: <input id="nth" type="text" placeholder="2" value="2" /><br /></nthText>
Percision: <sub>(min)</sub> <input id="percision" type="range" min="1" max="20" value="5" /> <sub>(max)</sub> (<span id="counter">5</span> repetitions)<br />
CSS to be rooted: <input id="input" type="text" placeholder="calc(calc(5vw * 5vh) - 3em)" value="calc(calc(5vw * 5vh) - 3em)" /><br />
<textarea id="output" resize="x" rows="4" onclick="this.select()"></textarea><br />
(click on the textarea above and press <b>Ctrl</b><small>+</small><b>C</b> to copy)此方法的浏览器支持：IE9+（因为只需要calc函数）
- user7892745
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
div的左上角和右下角部分遮盖，以使其成为特定角度的完美平行四边形。此外，div的宽度为100vw，高度为calc（100vh - 60px），因此平方根需要在calc()中进行，而不是在预处理器中进行。 - 75th Trombone