CSS genişliğindeki ondalık basamaklara uyuluyor mu?

225

CSS tasarımı yaparken bir süredir merak ettiğim bir şey.

CSS genişliklerinde ondalık basamaklara uyuluyor mu? Yoksa yuvarlak mı?

.percentage {
  width: 49.5%;
}

veya

.pixel {
  width: 122.5px;
}

html css

— Alastair Pitts
kaynak

186

Yüzde genişliği ise, evet, saygı duyulur . Martin'in işaret ettiği gibi, kesirli piksele ulaştığınızda işler bozulur, ancak yüzde değerleriniz tamsayı piksel değeri verirse (örn. Örnekte 200 piksellik% 50,5) mantıklı, beklenen davranış elde edersiniz.

Düzenleme: Ben ettik fraksiyonel piksele neler olduğunu göstermeye örnek güncellenmiş (Chrome'da değerler böylece 50, 50,5 ve 50,6 hepsi aynı genişliğe göstermek kesildiğini).

— Skilldrick
kaynak

7

Yüzde değerlerinin kendilerini yuvarlamama konusunda haklısınız, ancak ondalık basamaklı piksel genişlikleri ve yüzde hesaplamasının nihai sonucu her zaman tüm piksellere yuvarlanır :)

— MartinodF

2

@MartinodF Açıklama için teşekkürler. Evet, pikseller yuvarlatılmış, ancak aslında en yakın yere mi, zemine mi yoksa tavana mı yuvarlandıkları tanımlanmamıştır (bu, "işler bozulur" demekti).

— Skilldrick

1

@Skilldrick Merakınız için demonuzdaki kesirli pikselleri bazı tarayıcılarda denedim: hem IE9p7 hem de FF4b7 en yakın piksele yuvarlanırken, Opera 11b, Chrome 9.0.587.0 ve Safari 5.0.3 de değeri kısaltıyor. @andras Sadece açıklığa kavuşturmak için: Dahili değerlerin yuvarlandığını söylemiyorum, sadece son oluşturma değerleri. Yakınlaştırırsanız veya bazı öğeler özellikleri devralır vb., Bu ondalık basamaklar sayılacaktır.

— MartinodF

10

Modern güncelleme: Chrome sürüm 24 aslında yukarı yuvarlama fraksiyonel piksel. JsFiddle, 50,5 ve 50,6 değerlerinin her ikisini de 51 piksel kadar yuvarlar ve 50 piksel div değerinden 1 piksel daha geniş olur.

— Michael Butler

5

Dikkat edilmesi gereken en önemli nokta, kesirli piksel boyutlarına sahip öğelerin yan yana nasıl yığınlandığıdır. Onlar iken do : kendileri tarafından görsel olarak yuvarlak yukarı, aynı zamanda diğer fraksiyonel boyutlandırılmış elemanları yanına koymak fazladan yer almazlar cssdesk.com/8R2rB

— Sandy Gifford

53

Sayfa boyanırken sayı yuvarlansa bile, tam değer bellekte korunur ve sonraki alt hesaplama için kullanılır. Örneğin, 100.4999 piksel kutunuz 100 piksele boyarsa, genişliği% 50 olan alt öğe .5 * 100 yerine .5 * 100.4999 olarak hesaplanır. Ve böylece daha derin seviyelere.

Ebeveyn genişliklerinin ems olduğu ve çocukların yüzdelik olduğu ve yukarı yönde dört ondalık noktaya kadar dahil olmak üzere derin iç içe ızgara düzen sistemleri oluşturdum.

Kesinlikle, ama akılda tutulması gereken bir şey.

— natekoechley
kaynak

2

Kabul edilen cevap bundan daha eksiksiz, ancak bu konudaki fıkra, bana teknik çıkarımların kendilerini nasıl hissettireceği konusunda daha iyi bir his veriyor. Gönderdiğiniz için teşekkürler.

— Tom

23

Her ne kadar kesirli pikseller tek tek öğeler üzerinde yuvarlanmış gibi görünse de ( @SkillDrick çok iyi gösterdiğinden) kesirli piksellerin gerçek kutu modelinde gerçekten saygı gördüğünü bilmek önemlidir .

Bu en iyi, elemanlar yan yana (veya üst üste) istiflendiğinde görülebilir; başka bir deyişle, yan yana 400 0,5 piksel div yerleştirecek olsaydım, tek bir 200 piksel div ile aynı genişliğe sahip olacaklardı. Hepsi aslında 1 piksele yuvarlansaydı (tek tek öğelere bakmak gibi) 200 piksellik div değerinin yarısı kadar olmasını beklerdik.

Bu, çalıştırılabilir kod snippet'inde görülebilir:

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>

Snippet'i genişlet

— Sandy Gifford
kaynak

11

Oluşturma ile ilgili olarak: örnekte, her piksel için yarışan iki div var. Bu durumlarda, tarayıcınız bulanıklığı ve diğer tuhaf eserleri önlemek için tüm pikseli oluşturmak için bunlardan birini seçecektir. Piksellerin yarısını mavi olarak ayarlarsanız, :nth-child(even)veya öğesini kullanarak :nth-child(odd), ya her şeyin turuncu olduğunu ya da her şeyin mavi olduğunu fark edersiniz - mavi ve turuncu karışımı (belirsiz mor bir renk olur).

— Daan Wilmer

16

Genişliğinin bir tam sayıya yuvarlak olacak piksel .

Yine de her tarayıcının aynı şekilde dönüp dönmeyeceğini bilmiyorum. Alt piksel yüzdelerini yuvarlarken hepsinin farklı bir stratejisi var gibi görünüyor. Farklı tarayıcılarda alt piksel yuvarlama ayrıntılarıyla ilgileniyorsanız , ElastiCSS hakkında mükemmel bir makale var .

edit : Merak uğruna bazı tarayıcılarda @ Skilldrick'in demosunu test ettim. Kesirli piksel değerlerini kullanırken (yüzdeler değil, bağladığım makalede önerildiği gibi çalışırlar) IE9p7 ve FF4b7 en yakın piksele yuvarlanırken, Opera 11b, Chrome 9.0.587.0 ve Safari 5.0.3 ondalık basamakları kısaltır. Sonuçta ortak bir şeyleri olmasını umduğumdan değil ...

— MartinodF
kaynak

7

Değerleri en yakın tamsayıya yuvarlamış gibi görünüyorlar; ancak krom, safari ve firefox'ta tutarsızlık görüyorum.

Örneğin,% 33,3'ü 420,945 piksele dönüştürürse

chrome ve firexfox bunu 421 piksel olarak gösteriyor. safari ise 420 piksel olarak gösterilir.

Bu safari değil, krom ve firefox zemin ve tavan mantığını takip gibi görünüyor. Bu sayfa aynı sorunu tartışıyor gibi görünüyor

http://ejohn.org/blog/sub-pixel-problems-in-css/

— agaase
kaynak

6

Elemanlar tamsayı sayıda piksele boyamak zorundadır ve diğer cevaplar kaplandıkça, yüzdelere gerçekten saygı gösterilir.

Önemli bir not olduğunu piksel bu durumda aracı içinde css piksel bir 50,7499% çocukla 200px konteyner 101px yuvarlanır böylece, değil ekran piksel css piksel sonra retina ekranda 202px üzerine işlenmiş olsun, ve değil 400 *. 507499 ~ = 203 piksel.

Bu hesaplamada ekran yoğunluğu yok sayılır ve bir öğeyi belirli retina alt piksel boyutlarına boyamanın * bir yolu yoktur. Sandy Gifford'un gösterdiği gibi, gerçek öğenin boyutu 1 css pikselden daha az olsa bile , öğelerin arka planlarını veya kenarlıklarını 1 css piksel boyutundan daha az oluşturamazsınız.

[*] 0.5 ofset kutu gölgesi gibi bazı teknikleri kullanabilirsiniz, ancak gerçek kutu modeli özellikleri tam bir CSS pikseli ile boyanacaktır.

— Olex Ponomarenko
kaynak

Mükemmel gözlem

— Ağustos