CSS UzunluklarıYorum yok

Bir değer olarak bir uzunluk almak CSS epeyce özellikleri vardır. Genişlik, yükseklik, margin, padding, border: kutu modeli özelliklerini belirgin olanlardır. Ama bol yanı sıra başkalarına: ofset ve bir kutu-gölge ya da yazı tipi boyutu ve boşluğu boyutlandırma. CSS tüm kabul "uzunluk" özellikleri nelerdir?

Mutlak Uzunluklar

px

.wrap {
  width: 400px; 
}

Pikseller belki de en iyi bu uzunluk bakıyorsun ekranda literal ekran piksel ile ilgisi yok gibi "aygıt piksel" olarak düşünülmektedir. Bu aslında bir açısal ölçüm bulunuyor.

Bu cihazlar ve ekranlar arasında normalleştirilmiş bir değer olması gerekiyordu, ama giderek artık bu doğru değildir. Örneğin, iPad mini web siteleri bu değerleri normalleştirme yerine pencereden dışarı olduğunu piksel olarak ayarlanmış ise anlamı, iPad gibi aynı render.

Onlar sürekli işlenir gibi, diğer birçok uzunlukları piksel doğrudan eşleme ve JavaScript piksel konuşuyor olsa Piksel web üzerinde hala bir kanonik ölçümüdür.

in

.wrap {
  width: 4in; 
}
Santimetre fiziksel bir ölçüm vardır, ancak CSS arazi, onlar sadece piksel doğrudan eşler.Yorumlarda kullanım durumları ile düşmek için ve ben onları burada ekleyeceksiniz çekinmeyin, ama bu ya da bu fiziksel ölçümler geri kalanı için pratik bir kullanım durumunda.

1in == 96px

cm

.wrap {
  width: 20cm; 
}

Dünyanın çoğu için, santimetre fiziksel bir ölçü olarak daha tanıdık ve yararlıdır. Onlar da sadece piksel eşleştirilir:

1cm == 37.8px

mm

.wrap {
  width: 200mm; 
}

Büyüklükte bir ve daha küçük ...

1mm == 0.1cm == 3.78px

Font-Bağıl Uzunlukları

Em

.wrap {
  width: 40em; 
}

Bir göreli birim.Geçerli yazı harfi "M" dayalı Başlangıçta bir tipografik ölçümü. Font-family değiştirdiğinizde uzunluğunu değiştirmek etmemesine rağmen font boyutunu değiştirmek, onu değiştirir.

Hiç bir CSS olmadan, 1em olacaktır:

1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm

Herhangi bir CSS yazı tipi boyutunu (belgede herhangi bir düzeyde) değiştirirse, 1em font-size yeni ne olursa olsun olur.

Font-size uygulandığında mutlaka bir nebze funkier yapma, em birimleri font-size 1.1em bir eleman font-size 1.1em ile henüz başka bir öğenin içinde font-size 1.1em bir öğe içinde, yani eğer kendileri çarpın,çıkan boyutu 1.1 ✕ 1.1 ✕ 1.1 == 1.331rem (kök em). Bir eleman için ayarlanmış olsa bile Anlamı, 10em söylüyorlar, o göründüğü yerde tutarlı bir genişlik olacak anlamına gelmez. O (kanıt görmek) font-size değişirse geniş veya dar olabilir.

Rem

. Wrap {
width: 40rem;
}

Bir akrabası em gibi birim, ama her zaman "root" elemana göre (yani: root {}) yerine onlara yaptığı gibi kaskad kullanarak daha. Bu çok göreceli birimler ile çalışma basitleştirir.

Önemli tarayıcı desteği sorunları: IE 8, Safari 4 veya iOS 3.2 çalışmaz.

Makas

. Wrap {
width: 120pt;
}

Bir nokta bir inçin 1/72 eşit fiziksel bir ölçüsüdür. Puanlar CSS dışında boyutu türü için en yaygın yolu (muhtemelen neden CSS desteklenir) 'dir. Bu "Tabii ki küçük sekiz puan türü bu önemli bilgileri ayarlamak!" Dil hala yaygındır.

Puanlar fiziksel ortam dahil boyutlandırma türü için baskı stil en mantıklı, ama ekran medya için pt kullanarak veya başka bir yerde bir uzunluk kabul edilir engelleyen hiçbir şey yoktur.

Önemli tarayıcı desteği sorunları: pt boyutu ekranda rendering büyük farklılıklar olması için kullanılır. Burada IE 6 vs Firefox (muhtemelen 3.6) bir karşılaştırma var.

Pika

. Wrap {
width: 12PC;
}

Puan olarak aynı hikaye, sadece 1 adet == 12pt.

ex

. Wrap {
width: 60ex;
}

 

Bu mevcut fontun x yüksekliği dayalı bir ölçümdür. Bazen yazı kendi içinde gömülü bilgi geldiğini, bazen tarayıcı bir küçük glif ölçerek onu anlamaya ve en kötü durumda, bunu 0.5em ayarlanmış. Sözde x karakterinin yüksekliği dayanmaktadır çünkü "x" yükseklik olarak adlandırılır. X-yüksekliği anlamak için, bir küçük karakter düşündüğünüz bir küçük "d" gibi (ascender) kadar sopa biraz gibi. X yüksekliği o liberatör içermez, bu karakterin alt döngü kısmının yüksekliğidir.

Eğer font-family değiştirdiğinizde bir birim değeri özellikle bağlı olarak font-family değiştirdiğinizde yok ems, aksine, eski birimler bu yazı, ne değiştirebilirim. (Kanıt).

ch

. Wrap {
width: 60ch;
}

Bu ruh halinde x-boy benzer, ancak ch yerine x karakter yüksekliği sıfır (0) karakterin genişliğine bağlıdır. Ayrıca font-family değişiklikler olarak değiştirir.

Önemli tarayıcı desteği sorunları: Bu yazının anda yok WebKit tabanlı tarayıcı desteği.

Viewport Yüzde Uzunlukları
vw

. Wrap {
width: 10vw;
}

Bu işlem, "görünüm genişliği" birimidir. 1vw görüş alanının genişliği% 1'ine eşittir. Bu değer ne olursa olsun kendi ana unsur veya üst öğeleri genişliği tüm unsurları için tutarlı kalır dışında, yüzde benzer. Nasıl rem üniteleri gibi bir bit her zaman kök göredir.

Boyutlandırma sini buraya önemli kullanım durumdur. Viewport Ölçekli Tipografi bakın.

Önemli tarayıcı desteği sorunları: en son iOS 6 hariç tüm mobil tarayıcılarda desteği yok. Bu, tüm görünüm ilgili uzunluk birimleri için de geçerli.

vh

. Wrap {
width: 10vh;
}

Bu, vw (görünüm genişlik) ünitesi, bunun yerine sadece görünüm yüksekliği esas olarak aynıdır.

Vmin

. Wrap {
width: 20vmin;
}

Bu değer o anda, vw veya vh daha küçük hangisi olacak. Haşıl tipi standart bir kullanım durumunda, bu gerçek boyut ekran belirleyen kendi vw veya VH daha faydalı bir metrik olabilir.

vmaks

. Wrap {
width: 20vmax;
}

Bu değer şu anda büyük hangisi olacak, vw veya vh.

Önemli tarayıcı desteği sorunları: WebKit tabanlı tarayıcılarda Vmin değil vmax (henüz) destekler. Firefox destek vmaks olsa yapar.

Odd Ball Out
Percentage

. Wrap {
width: 50%;
}

Yüzde olarak belirlenmiş bir uzunluk, üst elemanın aynı özellik uzunluğuna bağlıdır. Bir eleman 450px genişlikte işler Örneğin, bir genişliğe sahip bir çocuk eleman 225px1 az verecek% 50 olarak ayarlanır.

Diğer bilgiler: yüzde teknik bir uzunluk birimi değil, ama o kadar bağlantılı olduğu için ben burada dahil ediyorum.

 Alıntı: http://css-tricks.com/the-lengths-of-css/