5

So recently I stumbled across this answer's CSS:

larger {
    width: 66.66666666%;
}

smaller {
    width: 33.333333333%;
}

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.

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>
4

1 に答える 1

10

それは本当にあなたの画面に依存するでしょう。最小の画像要素はピクセルです (したがって、その名前が付けられます)。最終的にすべてのサイズがピクセルに変換されるため、パーセンテージはそのように制限されます。

画面幅が 2048 ピクセルの場合、使用できる最小のパーセンテージ増分は約 0.05% です。

小数第4位の違いが分かるとしたらかなり大きな画面だと思います！

| | 幅 | 最小パーセント |
---------------------------
| | 2048年 | 0.048% |
| | 1024 | 0.098% |
| | 800 | 0.125% |
| | 768 | 0.130% |
| | 640 | 0.156% |
| | 600 | 0.166% |
| | 480 | 0.208% |
---------------------------

ノート

実際には、画面以外にも依存します。幅が 10 ピクセルの div があり、その中に 10 進数を使用して div を作成しようとしても、たとえば 10% と 12% の違いはわかりません。16% の差が見られる場合がありますが、それは丸めによるものです... 原則は同じです。分割する領域が小さいため、パーセンテージ ポイント間の差は見られません。

于 2013-07-11T13:30:05.527 に答える