|
Çoğu yerli tasarımcı px kullanmayı severken, çoğu yabancı web sitesi em ve rem kullanmayı tercih eder, peki üçü arasındaki fark nedir ve her birinin avantajları ve dezavantajları nelerdir? Size ayrıntılı bir tanıtım yapalım. PX özellikleri: 1. IE, px birimleri kullananların font boyutunu ayarlayamaz; 2. Çoğu yabancı web sitesinin ayarlanabilmesinin nedeni, yazı tipi olarak em veya rem kullanmalarıdır; 3. Firefox px, em ve rem ayarlarını ayarlayabiliyor, ancak Çinli internet kullanıcılarının %96'sından fazlası IE tarayıcı (veya çekirdek) kullanıyor. PX pikselleri. Göreli uzunluk birimleri. Pixel px, monitörün ekran çözünürlüğüne görelidir. (CSS2.0 kılavuzundan alıntı yapılmıştır) EM, uzunluğun göreli bir birimidir. Mevcut nesne içindeki metne göre font boyutu. Satırdaki metnin yazı tipi boyutu yapay olarak ayarlanmadıysa, tarayıcının varsayılan font boyutuna göre değişir. (CSS2.0 kılavuzundan alıntı yapılmıştır) Her tarayıcı için varsayılan font yüksekliği 16px'tir. Tüm ayarlanmamış tarayıcılar şu şekilde uyumludur: 1em=16px. Sonra 12px=0.75em, 10px=0.625em. Font boyutu dönüşümünü basitleştirmek için, css'deki gövde seçicisinde font-size=62,5% olarak bildirmeniz gerekir; bu da em değerini 16px*62,5%=10px yapar, böylece 12px=1,2em, 10px=1em, yani orijinal px değerinizi 10'a bölmeniz ve ardından birimi em ile değiştirmeniz yeterlidir. EM özellikleri: 1. Em'in değeri sabit değildir; 2. EM, ana elemanın yazı tipi boyutunu devralır. Bu yüzden CSS yazarken iki şeye dikkat etmemiz gerekiyor: 1. Gövde seçicisinde font-size=%62,5 belirt; 2. Orijinal px değerinizi 10'a böl ve onu em ile değiştirin; 3. Büyütülmüş fontların em değerlerini yeniden hesaplayın. Font boyutu ile ilgili tekrar tekrar açıklamalardan kaçının. Yani, 1.2 * 1.2 = 1.44 olgusundan kaçınmak için. Örneğin, 1.2em font boyutunu #content'de bildirirseniz, p'nin font boyutunu bildirirken sadece 1em olabilir, 1.2em değil, çünkü bu em o em değildir ve 1em=12px olur çünkü #content'nin font yüksekliğini miras alır. REM özellikleri rem, CSS3'e eklenen yeni bir göreli birim (root em) ve çok ilgi gördü. Bu ünite ile EM arasındaki fark nedir? Fark şu ki, bir öğe için yazı tipi boyutunu rem kullandığınızda, bu hâlâ göreceli boyutta kalır, ancak göreli sadece HTML kök elemanıdır. Bu birimin, göreli boyut ve mutlak boyut avantajlarını birleştirdiği söylenebilir; bu avantajlar sayesinde sadece kök elemanı tüm font boyutlarını orantılı olarak ayarlamak için değiştirmekle kalmaz, aynı zamanda font boyutlarının katman katman birleşme zincirleme reaksiyonunu da önleyebilir. Şu anda rem, IE8 ve önceki sürümler hariç tüm tarayıcılarda desteklenmektedir. Desteklemeyen tarayıcılar için yanıt çok basittir; yani mutlak birim ifadesi yazmaktır. Bu tarayıcılar, rem ile belirlenen font boyutunu görmezden gelir. İşte bir örnek: p {font-size:14px; font-size:.875rem; } Not:Font birimlerinin seçimi büyük ölçüde projenize bağlıdır ve kullanıcı tabanınız tarayıcının en son sürümünü kullanıyorsa REM önerilir; uyumluluk sorunu varsa px veya her ikisini kullanın. İşte bir px, em, rem birimi dönüştürme aracı adresi:http://pxtoem.com/
| 
Yayınlandı 21.03.2017 09:31:50
|
|
|
