样式表规则中会解释小数点后几位数? [英] How many digits after the decimal point are interpreted in stylesheet rules?

问题描述

所以最近我偶然发现了此答案的CSS :

So recently I stumbled across this answer's CSS:

larger {
    width: 66.66666666%;
}

smaller {
    width: 33.333333333%;
}

哪个让我思考:使用stylecheets从浏览器中真正解释了多少个数字?在Chrome中使用4位数字时，我已经看不到区别.

Which got me thinking: How much digits are really interpreted from browsers using stylecheets? As I fail to see a difference already when using 4 digits in Chrome.

我已经使用以下代码在JsFiddle上设置了示例:

I have set up an example on JsFiddle using the following code:

CSS:

body, div {
    width: 100%;
    min-height:2em;
    margin:0px;
    padding:0px;
    white-space: nowrap;
    font-family: monospace;
}
.left {
    display:inline-block;
    background: green;
    float:right;
}
.right {
    display:inline-block;
    background: blue;
    float:left;
}
.zero .left {
    width: 33%;
}
.zero .right {
    width: 66%;
}
.two .left {
    width: 33.33%;
}
.two .right {
    width: 66.33%;
}
.four .left {
    width: 33.3333%;
}
.four .right {
    width: 66.6666%;
}
.eight .left {
    width: 33.33333333%;
}
.eight .right {
    width: 66.66666666%;
}

HTML:

<div class='zero'>
    <div class='left'>33</div>
    <div class='right'>66</div>
</div>
<div class='two'>
    <div class='left'>33.33</div>
    <div class='right'>66.66</div>
</div>
<div class='four'>
    <div class='left'>33.3333</div>
    <div class='right'>66.6666</div>
</div>
<div class='eight'>
    <div class='left'>33.33333333</div>
    <div class='right'>66.66666666</div>
</div>

推荐答案

这实际上取决于您的屏幕.最小的图片元素是像素(因此得名)；由于最终所有尺寸都将转换为像素，因此百分比受到限制.

It's really going to depend on your screen. The smallest picture element is the pixel (hence its name); since all sizes are going to be converted into pixels in the end, percentages are constrained that way.

如果屏幕宽度为2048像素，则可以使用的最小百分比增量约为0.05％.

If your screen width is 2048 pixels, then the smallest percentage increment that can be used is around 0.05%.

我想如果您能辨别出小数点后四位的差异，那么您必须拥有一个相当大的屏幕！

I'm guessing you must have a pretty big screen if you can discern the difference at the 4th decimal place!

| Width | Minimum percent |
---------------------------
| 2048  |      0.048%     |
| 1024  |      0.098%     |
|  800  |      0.125%     |
|  768  |      0.130%     |
|  640  |      0.156%     |
|  600  |      0.166%     |
|  480  |      0.208%     |
---------------------------

注意

实际上，这不仅取决于屏幕.如果您的div宽度为10像素，并且您尝试使用小数在其中创建div，那么您将无法看到10％和12％之间的差异.您可能会看到16％的差异，但这是由于四舍五入而已...原理是相同的，只是您要划分的区域较小，所以看不到百分比之间的差异.

NOTE

Actually, it'll depend on more than your screen. If you have a div that is 10px wide and you try to create a div inside it using decimals, you're not going to be able to see difference between, say, 10% and 12%. You may see a difference at 16%, but that's due to rounding... The principle is the same, it's just the region that you're dividing over is smaller so the differences between percentage points cannot be seen.

这篇关于样式表规则中会解释小数点后几位数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！