CSS birimleri (px, %, em, vw, vh, vmin, vmax) ve calc işlevi. CSS'deki uzunluk birimleri

CSS birimleri, çeşitli özelliklerde değeri belirtmek için kullanılır. Mutlak ve göreceli olarak ikiye ayrılırlar.

Mutlak birimler

Mutlak birimler arasında santimetre (cm), milimetre (mm) ve inç (inç) bulunur. Bir web sayfasındaki öğeleri aynı şekilde görüntülemek üzere tasarlanmış olsalar da, tarayıcı ekranın veya monitörün fiziksel boyutunu her zaman doğru bir şekilde hesaplayamaz, bu nedenle öğelerin farklı cihazlarda farklı boyutları olabilir.

Bir cm ( yazı tipi boyutu: 1 cm; ) bir mm ( yazı tipi boyutu: 1 mm; ) bir inç ( yazı tipi boyutu: 1 inç; )

Tipik olarak, bu birimler, yazdırma sayfaları için boyut belirlenirken kullanılır.

Tipografik birimler

Tipografik birimler, noktaları (pt) ve tepe noktalarını (pc) içerir. Nokta (1pt) 1/72" sabit boyuta sahipken turna (1 adet) 1/6" (1 adet = 12pt)'dir. Bu iki ölçü birimi, ekranlarda kullanmaktan ziyade belgelerin basılı versiyonları için yazılmış stillerde en kullanışlıdır.

Tek nokta ( yazı tipi boyutu: 1 punto; ) .one-pica ( yazı tipi boyutu: 1 adet; )

göreli birimler

Göreli birimler pikselleri (px) ve yüzdeleri (%) içerir. Yüzde, bir öğenin yazı tipi boyutuyla veya öğenin boyutuyla doğrudan ilgisi olmayan bir ölçü birimidir. Yüzde olarak bir özelliğin değeri, doğrudan üst öğe için aynı özellik kümesinin değerine bağlıdır. Örneğin, yazı tipi boyutu üst öğenin yazı tipi boyutuna göredir ve yükseklik ve genişlik, üst öğenin içerik alanının yüksekliğine ve genişliğine göre yüzde olarak ifade edilir.

Bir piksel ( yazı tipi boyutu: 1 piksel; ) yüzde bir ( yazı tipi boyutu: %1; )

Piksel - ekrandaki bir fiziksel piksele eşit bir nokta. Ancak tarayıcılar, görüntü alanının boyutunu piksel cinsinden her zaman doğru şekilde hesaplamaz.

Yüksek çözünürlüklü ekranlarla donatılmış en yeni dizüstü bilgisayar, tablet ve akıllı telefon modellerini düşünün. Bu tür cihazlarda tarayıcı, px birimini ekrandaki fiziksel piksel sayısıyla ilişkilendirmez. Bunun yerine, px birimini, piksel yoğunlukları 96 ila 120 ppi aralığında olan geleneksel bir masaüstü monitöre yaklaşık görüntüleme performansı sağlayacak şekilde normalleştirir. Sonuç olarak, 10 piksellik bir kare, bir akıllı telefondaki tarayıcı tarafından her iki tarafta 15 ila 20 fiziksel piksel olacak şekilde oluşturulabilir. Bu, px'in de göreceli bir birim olduğu anlamına gelir.

Yazı tipine bağlı göreli birimler

İki ek göreli birim em ve ex'tir. Em - geçerli yazı tipinin yüksekliği, örneğin - belirtilen yazı tipinin küçük harfli "x" karakterinin yüksekliği.

One-ex ( yazı tipi boyutu: 1ex; ) .one-em ( yazı tipi boyutu: 1em; )

Yüzdeler gibi em, bir web sayfasındaki metin için yazı tipi boyutunu ayarlamak için yaygın olarak kullanılan yaygın bir ölçü birimidir.

CSS3, iki ek ölçü birimi getirdi: rem ve ch. Rem - kök öğenin yazı tipi boyutu ( ), ebeveynin veya ataların yazı tipi boyutlarının geçerli öğenin yazı tipi boyutunu etkilemesini önlemek için em yerine kullanılabilir.

Bir-rem ( yazı tipi boyutu: 1rem; )

ch birimi, öğenin yazı tipinin karakter genişliği sıfır (0)'a eşittir. 1ch yaklaşık olarak bir karaktere eşit olduğundan, metin içeren bir alanın genişliğini belirlemek için kullanımı yararlı olabilir.

Kanal birimi yalnızca Chrome 27+, Firefox 19+ ve IE9'da desteklenir. Rem, Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ ve Opera 11.6+ sürümlerinde desteklenir.

Görüntü Alanı Birimleri

Görünüm alanı birimleri, öğeleri web sayfasının görünen kısmı olan görünüm alanına göre ölçeklendirmenize olanak tanıyan vw (genişlik) ve vh (yükseklik) içerir.

Genişlik: 50vw; /* Görüntü alanı genişliğinin %50'si */ yükseklik: 25vh; /* Görüntü alanı yüksekliğinin %25'i */

İki isteğe bağlı birim, minimum veya maksimum görüntü alanı boyutu değerini belirten vmin ve vmax'tır.

Genişlik: 1vmin; /* 1vh veya 1vw, hangisi daha küçükse */ yükseklik: 1vmax; /* 1vh veya 1vw, hangisi daha büyükse */

Göreceli görüntü alanı birimleri Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ ve Opera 15+ sürümlerinde desteklenir.

Birim değerler

Değerlerin tamsayı olarak belirtilmesi gerekmez, ondalık olarak da belirtilebilirler. Bazı özellikler de negatif değerleri değer olarak belirtmenize izin verir.

P ( yazı tipi boyutu: 0.394 inç; ) /* ondalık */ p ( kenar boşluğu: -1 piksel; ) /* negatif değer */

Ölçü biriminin önünde bir boşluk varsa veya herhangi bir ölçü birimi belirtilmemişse (boş değer dışında) bildirimin çalışmayacağını unutmayın. Değer olarak sıfır kullanılırsa, ölçü biriminin göstergesi atlanabilir.

P ( yazı tipi boyutu: 1ex; ) /* doğru */ p ( yazı tipi boyutu: 0; ) /* doğru */ p ( yazı tipi boyutu: 0ex; ) /* doğru */ p ( yazı tipi boyutu: 1 eski ; ) /* yanlış */ p ( yazı tipi boyutu: 1; ) /* yanlış */

Bir CSS bildirimi bir hata içerdiğinde, bildirimin geri kalanı çalışmaya devam ederken tarayıcı tarafından yok sayılır.

CSS3'ün yeni ölçü birimleri var. (Sanırım bundan daha önce bahsetmiştim. ingilizce) px, pt, em ve yeni rem'i zaten duydunuz. Birkaçına daha bakalım: vw ve vh.

Genellikle düzende, tarayıcının görünüm alanına sığması garanti edilen öğeler vardır. Bunun için genel olarak JavaScript kullanılmaktadır. Görüntü alanı boyutunu kontrol edin ve öğeleri buna göre yeniden boyutlandırın. Kullanıcı tarayıcı penceresini yeniden boyutlandırırsa prosedür tekrarlanır.

vw/vh ile öğelerin boyutunu görünümün boyutuna göre ayarlayabiliriz. vw/vh birimleri ilginçtir çünkü 1vw, görüntü alanı genişliğinin 1/100"üne eşit bir birimdir. Bir öğeye, görüntü alanı genişliğine eşit bir genişlik vermek için, örneğin, width:100vw değerini ayarlarsınız.

nasıl kullanılabilir

Işık kutuları genellikle görünüm alanına göre konumlandırıldıklarından vw ve vh için harika bir adaydır, ancak ben position:fixed top , bottom , left ve right ile kullanımı daha kolay buluyorum çünkü yüksekliği ve genişliği ayarlamak zorunda değilsiniz hiç.

Normal akışta olan öğeleri boyutlandırmak için yeni birimleri kullanabilirsiniz. Örneğin, sayfaya ekran görüntüleri yerleştirebilirim. Bu ekran görüntülerinin yüksekliği, görünüm alanının yüksekliğini geçmemelidir. Bunu yapmak için görüntülerin maksimum yüksekliğini ayarlayabilirim:

Img (maksimum yükseklik:95vh; )

Bu durumda, ekrandayken biraz boşluk bırakmak için yüksekliği 95vh olarak ayarlıyorum.

Tarayıcı Desteği

Rem, IE9 dahil hemen hemen tüm büyük tarayıcılar tarafından destekleniyorsa, vw ve vh'yi kullanmak beklemeye değer. Şu anda yalnızca Internet Explorer 9 bunları desteklemektedir.

CSS ile çalışırken, her zaman şu veya bu aracın ne kadar güçlü olduğunu anlamaya başladığınız bir nokta gelir. Em CSS birimini oldukça iyi anlasam da, gücünü yalnızca Simurai gönderisini okuduktan sonra hissettim. Bu yazıda onun deneyimini kullanacağım.

em nedir?

CSS'de em birimi, em'in uygulandığı öğenin geçerli yazı tipi boyutuna eşittir. Em birimleri, belirli bir yazı tipi boyutuna sahip olmayan alt öğelerde kullanıldığında, bunu belgenin kök öğesine kadar ebeveynlerinden devralır.

Aşağıdaki CSS koduna bakın:

Örnek ( yazı tipi boyutu: 20 piksel; )

Bu durumda, bu öğenin 1em veya alt öğeleri ( diğer yazı tipi boyutu tanımlarının yokluğunda) 20 piksele eşit olacaktır . Yani satırı eklersek:

Örnek ( font-size: 20px; border-radius: .5em; )

5em'lik bir sınır yarıçapı değeri, 10 piksele (yani, 20 * 0,5 ) eşit olacaktır. Benzer şekilde:

Örnek ( font-size: 20px; border-radius: .5em; padding: 2em; )

2em dolgu değeri 40 piksel (20 * 2 ) olacaktır. Daha önce de belirtildiği gibi, bu tür bir hesaplama, açıkça tanımlanmış bir yazı tipi boyutuna sahip olmadığı sürece herhangi bir alt öğe için geçerlidir. Daha sonra em biriminin CSS'deki değeri benzer şekilde hesaplanacaktır.

CSS bir yazı tipi boyutu belirtmezse, em, tarayıcının varsayılan yazı tipi boyutu olacaktır. Çoğu zaman bu değer 16 pikseldir. Şimdi bu yöntemin öğeleri kolayca yeniden boyutlandırmak için nasıl kullanılabileceğine bakalım.

Bileşen Düzeylerini Yeniden Boyutlandırma

"Bileşenler" kavramı artık oldukça popüler. Modüler CSS yöntemlerine ve genel olarak kapsüllenmiş kod bölümleri fikrine çok uygundur. Ve sanırım bir sonraki yöntem, web bileşenleri yaygın destek kazandığında daha da ilginç olacak.

Yöntem şu şekilde çalışır: modül içindeki çeşitli öğeler için bir temel birim oluşturan font-size özelliğini kullanır. em birimi, üst öğenin yazı tipi boyutunu temel aldığından, bu, üst öğenin yazı tipi boyutu özelliğini değiştirerek tüm bileşeni kolayca düzenlenebilir hale getirir.

Eylemde görelim:

Demoyu görüntüle

Bu modül dört ana unsurdan oluşmaktadır. Modülü yeniden boyutlandırmak için demo sayfasının üst kısmındaki kaydırıcıyı hareket ettirin. Dilerseniz görüntüleyebilirsiniz. tam ekran modunda. Kaydırıcı, bileşenin kök öğesinin bir değerini içerir: yazı tipi boyutu değeri.

Unutulmamalıdır ki, bileşenin boyutunu bir CSS özelliği aracılığıyla ayarlamak gerekli değildir, kullanıcı boyutu ayarlarda değiştirebilir. Bu, geliştiricinin bileşenin tüm bölümlerinde farklı değerlerden geçmek zorunda kalmadan hızlı bir şekilde değişiklik yapabilmesi için yapılır.

Yazı tipi boyutu değiştirildiğinde, ana öğenin tüm CSS em değerlerini ve tüm alt öğelerini etkileyerek bileşenin tüm parçalarını orantılı olarak esnek hale getirir.

Bunu not et:

• Bir bileşen içinde, tüm boyutlar em kullanılarak belirtilir. İstenirse değiştirilebilen dış kenarlık ve görüntü hariç, ancak bu durumda statik olan boyuttan memnunum;
• Sağ üst köşedeki gözyaşı simgesi, benzer şekilde ana öğenin yazı tipi boyutunu kullanan bir sözde öğedir;
• CSS ayrıca ana öğenin yazı tipi boyutunu ayarlayan iki medya sorgusu içerir. Bu, bu yöntemin kullanışlılığını gösterir, çünkü medya sorgularında tüm boyutları değiştirmeniz gerekmez, yalnızca yazı tipi boyutunu değiştirmeniz gerekir.

Bazı açıklamalar, eksiklikler vb..

Örnekte de görebileceğiniz gibi, bu tür esnek yeniden boyutlandırma her zaman doğru kullanım değildir. Biraz sınırlı olabilir.

Bazı CSS em birim değerlerini değiştirmeniz gerekebilir. Ve örnekteki ana öğenin kenarlığında olduğu gibi, muhtemelen boyutu değiştirmek istemezsiniz. Çünkü özellik tüm elementler için geçerlidir. Bu sorunu, saklamak istediğiniz em öğelerinden kaçarak çözebilirsiniz.

Kök yazı tipi boyutunu ayarlamak için piksel kullanmaya gerek yoktur. Bunun için em kullanabilirsiniz, ancak bu birimlerin ebeveynlerinizden miras alınacağını unutmayın.

Peki ya rem ve Sass?

CSS'deki rem birimi, hesaplanan yazı tipi boyutundan bağımsız olarak her zaman kök öğenin yazı tipi boyutu değerini devralır. HTML'de, kök öğe . Böylece rem kullanılabilir. Ancak bu, öğenin yazı tipi boyutunu kullanarak sayfadaki tüm bileşenleri kontrol etmeniz gerekeceği anlamına gelir. Bu, bazı projeler için işe yarayabilir, ancak bence bu yöntem, belgenin tamamı yerine tek bir bileşeni yeniden boyutlandırırken en iyi sonucu verir.

Sass önişlemcisini kullanmaya gelince, bu bir yan sorun. Sonuç olarak, CSS, Sass kodunda belirtilen birimleri kullanacak ve kalıtım aynı şekilde çalışacaktır.

Çözüm

Bunun bir CSS çerçevesi veya bileşen kitaplığı oluştururken kullanmak için iyi bir teknik olduğunu düşünüyorum. Bu yöntem, CSS em biriminin ne kadar güçlü olduğuna iyi bir örnektir.

“The Power of em Units in CSS” makalesinin çevirisi projenin güler yüzlü ekibi tarafından hazırlandı.

En kafa karıştırıcı yönlerden biri css uygulama yazı Boyutu metin ölçekleme için öznitelik. CSS kullanarak, dört farklı birim kullanarak tarayıcıdaki metni yeniden boyutlandırabilirsiniz. Bu dört birimden hangisi web için en iyisidir? Bu, çeşitli tartışmalara ve eleştirilere neden olan bir sorudur. Kesin bir cevap bulmak zordur çünkü sorunun kendisi karmaşıktır.

Karşılama - birimler

1. "Ems" (em): "em", web belgelerinde kullanılan ölçeklenebilir bir birimdir. "em", geçerli yazı tipi boyutuna eşittir; örneğin, belgenin yazı tipi boyutu 12pt ise, 1em 12pt'tir. "em" doğası gereği ölçeklenebilirdir, bu nedenle 2em 24pt'ye, 0,5em 6pt'e eşit olur ve bu böyle devam eder. Ölçeklenebilirliği ve mobil cihazlara faydalı bir şekilde uygulanabilmesi nedeniyle "em" kullanımı web belgelerinde giderek daha popüler hale geliyor.
2. Piksel (px): "px", ekranlarda (örneğin bir bilgisayar ekranında okumak için) kullanılan sabit boyutlu birimlerdir. Bir piksel, bilgisayar ekranındaki bir noktaya eşittir (ekran çözünürlüğünüzün en küçük öğesi). Birçok web tasarımcısı, bir tarayıcıda görüntülendiğinde sitelerinin mükemmel piksel temsilini elde etmek için web belgelerinde px'i kullanır. px kullanımıyla ilgili bir sorun, bu birimlerin görme engelli okuyucular veya mobil cihazlar için yakınlaştırmaya izin vermemesidir.
3. Noktalar (pt): "pt", geleneksel olarak yazılı basında kullanılır (kağıda basılması gereken her şey vb.). Bir "pt", bir inçin 1/72'sine eşittir. "pt", "px" gibi sabit bir birim boyutuna sahiptir ve ölçeklenemez.
4. Yüzdeler (%): % cinsinden ölçü birimleri, birkaç temel farklılık dışında "em" ile benzerdir. İlk olarak, mevcut yazı tipi boyutu %100'dür (yani 12pt = %100). "%" kullanarak, metniniz mobil cihazlar ve kullanıcı dostu (erişilebilirlik) için tamamen ölçeklenebilir hale gelir.

Peki fark nedir?

Yazı tipi boyutundaki birimleri çalışırken gördüğünüzde arasındaki farkı anlamak kolay olacaktır. Genel bir kural olarak, 1em = 12pt = 16px = %100. Bu yazı tipi boyutlarıyla, temel yazı tipi boyutunu (CSS gövde seçiciyi kullanarak) %100'den %120'ye yükselttiğinizde ne olacağını görelim.

Yazı tipi boyutunu %100'den %120'ye değiştirin.

Gördüğünüz gibi "em" ve "%" yazı tipi boyutunu artırırken "px" ve "pt" artırmadı. Metniniz için mutlak bir boyut belirlemek kolay olabilir, ancak ziyaretçilerinizin herhangi bir cihazda veya makinede görüntülenebilen ölçeklenebilir metni kullanması çok daha iyidir. Bu nedenle web doküman metni için "em" ve "%" birimlerinin kullanılması tercih edilir.

"em" vs "%"

"px" ve "pt" birimlerinin web belgeleri için en iyisi olmadığını ve bu da bizi "em" ve "%" kullanmaya zorladığını keşfettik. Teoride, "em" ve "%" birimleri aynıdır, ancak pratikte dikkate alınması önemli olan küçük farklılıkları vardır.

Yukarıdaki örnekte, temel yazı tipi boyutu birimi olarak yüzdeleri kullandık (gövde etiketinde). Yazı tipi boyutu temel biriminizi "%" yerine "em" olarak değiştirirseniz (yani gövde (yazı tipi boyutu: 1em;)) siz, meli farkı fark etme. Temel birimimiz "1em" olduğunda ve istemci tarayıcı ayarlarında "Yazı Tipi Boyutunu" değiştirdiğinde ne olacağını görelim (Internet Explorer gibi birçok tarayıcıda bu seçenek vardır).

İstemci tarayıcıdaki metni yeniden boyutlandırdığında yazı tipi boyutu.

İstemci tarayıcısında metin boyutu "orta" olarak ayarlandığında, "em" ve "%" arasında gözle görülür bir fark yoktur. Ancak parametre değiştirilirse fark çok büyük olur. "En Küçük" olarak ayarlandığında, "em", "%" değerinden çok daha küçüktür ve "En Büyük" olarak ayarlandığında, tam tersi, "em", "%" değerinden çok daha büyük görüntülenir. Birçok kişi "em"deki birimlerin amaçlandığı gibi ölçeklendiğini iddia etse de, uygulamada "em"deki metin çok keskin bir şekilde ölçeklenir ve en küçük metin bazı makinelerde okunamaz hale gelir.

Karar

Teoride, "em" birimleri web'deki yeni ve yakında çıkacak olan yazı tipi boyutu standardıdır, ancak uygulamada "%" birimleri metnin kullanıcılara daha tutarlı ve rahat bir şekilde görüntülenmesini sağlar. İstemci parametrelerini değiştirirken, "%" içindeki metin makul oranlarda değişti, bu da tasarımcıların okunabilirliği, erişilebilirliği ve tasarımı korumasını sağlıyor.

kazanan: yüzde (%).

Bir makale gerekli değildir.

1 piksel (piksel)= 1/96 inç ama CSS'de değil. CSS'de 1 piksel, kullanıcının ekranında, fiziksel boyutu cihazın çözünürlüğüne ve bir kişinin yüzeyine (cep telefonu veya TV) baktığı mesafeye bağlı olan bir noktadır. Kodu hangi ölçü biriminde yazmazsak, px'e indirgenir.

1 saat= ebeveynin yazı tipi boyutu değerine. Aşağıdaki çokgende sarı ve kahverengi blokların farklı yazı tipi boyutlarına sahip olduğunu, ancak yazı tipi boyutunun aynı olduğunu unutmayın.

16px * 1 = 16px // sarı 16px * 0.5 = 8px // yeşil 8px * 2 = 16px // kahverengi

1 ay= yazı tipi boyutunun değeri (belgenin kök öğesi).

16px * 1 = 16px // sarı 16px * 0.5 = 8px // yeşil 16px * 2 = 32px // kahverengi

yüzde 1 (%1)— üst etiketin özellik değerine göre değer.

16px * %100 = 16px // sarı 16px * %50 = 8px // yeşil 8px * %200 = 16px // kahverengi

Üst öğenin genişliğini azaltmak, öğenin genişliğini de azaltır, ancak yazı tipini azaltmaz.

1vw= pencere genişliğinin %1'i. Pencerenin genişliğini azaltmak, öğenin genişliğini, yüksekliğini ve yazı tipini azaltır. Ctrl + veya Ctrl - tuşlarına basıldığında yazı tipi ölçeklenmeyecektir.

1vh= pencere yüksekliğinin %1'i. Pencerenin yüksekliğini azaltmak, öğenin genişliğini, yüksekliğini ve yazı tipini azaltır. Ctrl + veya Ctrl - tuşlarına basıldığında yazı tipi ölçeklenmeyecektir.

1vdak= 1vw veya 1vh. Daha küçük olan seçilir.

1vmaks= 1vw veya 1vh. Daha büyük olan seçilir.

yazı tipi boyutu: 16px %100 1em 1vw 1vh 1vmin 1vmax 1rem;

yazı tipi boyutu: 8px %50 .5em .5vw .5vh .5vmin .5vmax .5rem ;

yazı tipi boyutu: 32px %200 2em 2vw 2vh 2vmin 2vmax 2rem ;

hesap() işlevi

Hiç yüzdelerden piksel veya ems çıkarmak istediniz mi? Örneğin, yapmak için. Şimdi mümkün. calc() işlevi, matematiksel ifadeleri uygulamanıza olanak tanır

Toplama (iki tarafta boşluklarla ayrılmış karakter) - çıkarma (her iki tarafta boşluklarla ayrılmış karakter) * çarpma / bölme

İşte bir başka güzel örnek, .

• 1
• 2
• 3
• 4