5

所以最近我偶然发现了这个答案的 CSS：

larger {
    width: 66.66666666%;
}

smaller {
    width: 33.333333333%;
}

这让我想到：使用 stylecheets 的浏览器真正解释了多少数字？因为在 Chrome 中使用 4 位数字时，我已经看不出有什么不同了。

我使用以下代码在 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>
4

1 回答 1

10

这真的取决于你的屏幕。最小的图片元素是像素（因此得名）；由于最终所有尺寸都将转换为像素，因此百分比会受到限制。

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

如果你能分辨出小数点后四位的差异，我猜你一定有一个相当大的屏幕！

| 宽度 | 最低百分比 |
--------------------------
| 2048 | 0.048% |
| 1024 | 0.098% |
| 800 | 0.125% |
| 第768章 0.130% |
| 640 | 0.156% |
| 600 | 0.166% |
| 480 | 0.208% |
--------------------------

笔记

实际上，它不仅仅取决于您的屏幕。如果您有一个 10 像素宽的 div，并且您尝试使用小数在其中创建一个 div，您将无法看到 10% 和 12% 之间的差异。您可能会看到 16% 的差异，但这是由于四舍五入造成的……原理是一样的，只是您要划分的区域较小，因此看不到百分点之间的差异。

于 2013-07-11T13:30:05.527 回答