Question

所以最近我偶然发现了this answer's CSS：

larger {
    width: 66.66666666%;
}

smaller {
    width: 33.333333333%;
}

让我思考：使用样式表从浏览器中真正解释了多少位数？因为在Chrome中使用4位数时我没有看到差异。

我使用以下代码设置了example on JsFiddle：

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>

Answer 1

这真的取决于你的屏幕。最小的像素是像素（hence its name）;由于所有尺寸最终都将转换为像素，因此百分比受到限制。

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

我猜你必须有一个相当大的屏幕，如果你能辨别出小数点后4位的差异！


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

注

实际上，它取决于你的屏幕以上。如果你有一个10px宽的div并且你尝试使用小数在其中创建一个div，那么你将无法看到10％和12％之间的差异。您可能会看到16％的差异，但这是由于四舍五入...原则是相同的，只是您所分割的区域较小，因此无法看到百分点之间的差异。

在样式表规则中解释小数点后的位数？

1 个答案:

注