所以最近我偶然发现了 this answer’s CSS： larger { width: 66.66666666%;}smaller { width: 33.33333333
... . . 所以最近我偶然发现了 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>.
解决方法
. 这真的取决于你的屏幕.最小的像素是像素( 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％的差异,但这是由于四舍五入…原则是相同的,它只是您所分割的区域较小,因此无法看到百分点之间的差异.
. . .. ...