Что-то, о чем я уже некоторое время размышлял, делая дизайн CSS.
Значимы ли десятичные числа в ширине css? Или они округлены?
.percentage
{
width: 49.5%;
}
или
.pixel
{
width: 122.5px;
}
Что-то, о чем я уже некоторое время размышлял, делая дизайн CSS.
Значимы ли десятичные числа в ширине css? Или они округлены?
.percentage
{
width: 49.5%;
}
или
.pixel
{
width: 122.5px;
}
Если это процентная ширина, то да, это соблюдается. Как указывал Мартин, все происходит, когда вы получаете дробные пиксели, но если ваши процентные значения дают целочисленное значение пикселя (например, 50,5% от 200 пикселей в примере), вы получите разумное ожидаемое поведение.
Изменить: Я обновил пример, чтобы показать, что происходит с дробными пикселями (в Chrome значения усечены, поэтому 50, 50.5 и 50.6 показывают одну и ту же ширину).
Даже когда число округляется, когда страница окрашивается, полное значение сохраняется в памяти и используется для последующего вычисления ребенка. Например, если ваша коробка размером 100.4999px окрашивается до 100 пикселей, то ее ребенок с шириной 50% будет рассчитан как .5 * 100.4999 вместо .5 * 100. И так далее на более глубокие уровни.
Я создал глубоко вложенные системы компоновки сетки, где ширины родителей - ems, а дети - проценты, и в том числе до четырех десятичных точек вверх по течению имели заметное влияние.
Случай с краем, конечно, но что-то иметь в виду.
Хотя дробные пиксели могут казаться округленными на отдельных элементах (как очень хорошо демонстрирует @SkillDrick), важно знать, что дробные пиксели фактически соблюдаются в реальной модели окна.
Это лучше всего увидеть, когда элементы располагаются рядом друг с другом (или сверху); другими словами, если бы я должен был размещать 400 0,5 пиксельных div бок о бок, они имели бы ту же ширину, что и один 200-пиксельный div. Если бы все они фактически округлились до 1px (как это видно на отдельных элементах), мы ожидаем, что 200px div будет наполовину длиннее.
Это можно увидеть в этом фрагменте кода:
body {
color: white;
font-family: sans-serif;
font-weight: bold;
background-color: #334;
}
.div_house div {
height: 10px;
background-color: orange;
display: inline-block;
}
div#small_divs div {
width: 0.5px;
}
div#large_div div {
width: 200px;
}
<div class="div_house" id="small_divs">
<p>0.5px div x 400</p>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
<br>
<div class="div_house" id="large_div">
<p>200px div x 1</p>
<div></div>
</div>
Ширина будет округлена до целого числа пикселей.
Я не знаю, будет ли каждый браузер обойти его таким же образом. Кажется, что они имеют другую стратегию при округлении субпиксельных процентов. Если вы заинтересованы в деталях округления субпикселей в разных браузерах, отличная статья о ElastiCSS.
edit. Я тестировал демонстрацию @Skilldrick в некоторых браузерах ради любопытства. При использовании дробных пикселей значений (не процентов, они работают, как было предложено в статье, я связан) IE9p7 и FF4b7, кажется, округляют до ближайшего пикселя, в то время как Opera 11b, Chrome 9.0.587.0 и Safari 5.0.3 усечь десятичные знаки. Не то чтобы я надеялся, что у них есть что-то общее...
Кажется, они округляют значения до ближайшего целого числа; но я вижу несогласованность в хроме, сафари и firefox.
Например, если 33.3% конвертируется в 420.945px
хром и firexfox показывают это как 421px. в то время как сафари показывает его как 420 пикселей.
Кажется, что хром и firefox следуют за полом и поточной логикой, а сафари - нет. Эта страница, похоже, обсуждает ту же проблему
Элементы должны рисовать до целого числа пикселей, а по мере того, как другие ответы покрываются, проценты действительно соблюдаются.
Важно отметить, что пикселы в этом случае означают css пикселей, а не пиксели экрана, поэтому контейнер размером 200 пикселей с ребенком 50,7499% будет округлен до 101px css пикселей, которые затем отображаются на 202px на экране сетчатки, а не 400 *.507499 ~ = 203px.
Плотность экрана игнорируется в этом расчете, и нет возможности изменить размер элемента для конкретных размеров подпикселей сетчатки. У вас не может быть фона или фона элементов, размер которых меньше 1 css pixel, хотя фактический размер элемента может быть меньше 1 пикселя css, как показала Сэнди Гиффорд.
Интересно, что между ответами natekoechley и Olex Ponomarenko's, что точные значения хранятся в памяти и учитываются для некоторых вещей, но не для всех.