Nasıl kullanılır
- Kök yazı tipi boyutu alanına projenizdeki html yazı boyutunu px olarak girin.
- Hassasiyet ile sonuçlarda kullanılacak en fazla ondalık basamak sayısını seçin.
- CSS sekmesinde Yön seçeneğini px → rem veya rem → px olarak ayarlayın.
- CSS kodunuzu giriş editörüne yapıştırın; dönüştürülen kodu sonuç editöründen alın. Tek bir değer için Dönüştür sekmesinde piksel, REM veya EM alanına yazın (24, 1.5rem gibi); çok sayıda değer için Toplu sekmesine her satıra bir değer girin.
Örnekler
Ürün kartında ince kenarlığı koruma
.urun-karti {
padding: 24px;
border: 1px solid #ddd;
border-radius: 8px;
}.urun-karti {
padding: 1.5rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
}Yalnızca yazı tipi özelliklerini dönüştürme
.haber-basligi {
font-size: 27px;
line-height: 35px;
letter-spacing: 0.5px;
margin-bottom: 18px;
}.haber-basligi {
font-size: 1.35rem;
line-height: 1.75rem;
letter-spacing: 0.03rem;
margin-bottom: 18px;
}Menü ölçülerini rem'den px'e çevirme
.ana-menu {
gap: 0.75rem 2rem;
padding: 1.25rem;
font-size: 1rem;
}.ana-menu {
gap: 12px 32px;
padding: 20px;
font-size: 16px;
}İpuçları
- Dönüştürülen dosyayı CSS Formatter ile düzenleyin.
- CSS Küçültücü ile daha küçük hâle getirin.
Sık sorulan sorular
1 rem kaç px eder?
1 rem, kök öğenin yazı tipi boyutuna eşittir. Kök boyut 16px ise 1 rem = 16px olur; px değerini rem'e çevirmek için kök boyuta bölün.
rem ile em arasındaki fark nedir?
rem, kök (html) öğesinin yazı tipi boyutuna göre hesaplanır; em ise üst öğenin yazı tipi boyutuna göre. Bu araç rem için Kök yazı tipi boyutunu, em için em için üst öğe yazı tipi boyutu alanını kullanır; ikincisi Seçenekler altındadır ve siz değiştirene kadar köke bağlı kalır. CSS dönüşümünde em değerleri değiştirilmez.
Media query içindeki px değerleri de dönüştürülür mü?
Varsayılan olarak hayır. Media query'leri dönüştür seçeneği açıkken @media ve @container koşullarındaki değerler de dönüştürülür. Media query içindeki rem birimi, sayfanın kök yazı boyutunu değil tarayıcının varsayılan yazı boyutunu temel alır.
Dönüştürmeden sonra calc() neden çalışmayabilir?
Araç, calc() içindeki 0px değerini de birimsiz 0 yapar. Örneğin calc(0px + 10px) dönüşümden sonra geçersiz olabilir; bu ifadeleri kullanmadan önce kontrol edin.
CSS kodum sunucuya gönderilir mi?
Dönüşüm tarayıcınızda yapılır; girdiğiniz değerler ve CSS kodu sunucuya gönderilmez veya kaydedilmez. Ayarlar yerel olarak saklanır; Google Analytics kullanım olaylarını değerler ve CSS içermeden alır.