CSS Ölçek FABRİKA araç 07

px · rem · vw · clamp()

CSS Ölçek — px/rem/vw clamp() üretici

İki viewport genişliğinde istediğiniz boyutları girin; doğrusal ölçeği, px ve rem clamp() ifadelerini ve örnek sonuçları görün.

Kısa cevap

İki viewport noktası arasındaki akışkan CSS değeri, doğrusal b + m·viewport bağıntısının clamp(alt, tercih, üst) ile sınırlandırılmasıdır.

Kök yazı boyutu başlangıçta 16px seçilir; bu evrensel bir CSS sabiti değildir ve değiştirilebilir.

Noktaları girin

CSS px cinsinden iki doğrulama noktası.

01 / GİRDİ
Başlangıç noktası
CSS px
Birim CSS px; en az 1 ve bitiş viewportundan küçük olmalı.
CSS px
Birim CSS px; 0 veya daha büyük olabilir.
Bitiş noktası
CSS px
Birim CSS px; minimum viewporttan büyük olmalı.
CSS px
Birim CSS px; küçük bir değer azalan ölçek üretir.
Ayarlar
px/rem
Birim px/rem; 0’dan büyük, 16 yalnız araç varsayılanıdır.
2–8
Birim basamak; yalnız gösterimi ve kopyalanan CSS’i etkiler.
İsteğe bağlı; birim CSS px. Değerleri virgül, boşluk veya noktalı virgülle ayırın.

Üretilen CSS

Tam hesap, seçilen basamakta biçimlenir.

02 / ÇIKTI
px çıktısı
rem çıktısı

Eğim (m)
vw katsayısı (100m)
Kesişim (b), px
Kesişim (b), rem
Clamp alt sınırı
Clamp üst sınırı

Hesabı doğrulayın

İz, tablolar ve JSON aynı saf motor sonucundan çizilir. Ham sayılar JavaScript double hassasiyetinde kalır.

Görünür hesap izi
    Motor sonucu (JSON) 
    
        
    
      
    
      
    Dar ekranda tüm sütunları görmek için yatay kaydırın; klavyede tablo bölgesine odaklanıp sol/sağ ok tuşlarını kullanın.
    
      
    
        
    
          
    
            Viewport doğrulaması
            
              
    
                Viewport (px)
                Tercih (px)
                Sıkıştırılmış (px)
                Sınır durumu
              
    
                
            
          
    
        
    
        
    
          
    
            px ↔ rem dönüşümü
            
              
    
                Değer
                px
                rem
              
    
                
            
          
    
        
    
      
    
    
    

    
    
      
    Tarayıcı viewportunda önizleme
    
      
    Bu önizleme gerçek tarayıcı viewport genişliğini ve yalnız yerel px CSS ifadesini kullanır. Örnek genişliklerin sayısal doğrulaması yukarıdaki tablodadır.
    
      
    
        
    
          
    Akışkan CSS önizlemesi
    
          
    
        
    
      
    
    
    

    
    
      
    CSS clamp() nasıl üretilir?
    
      
      
        
    1. İki noktayı girin
      Minimum ve maksimum viewport genişlikleriyle bu genişliklerde istediğiniz boyutları CSS px olarak girin.
      2. 
        
    2. Kök yazı boyutunu seçin
      rem çıktısı için rootFontPx değerini girin; 16px yalnızca değiştirilebilir varsayılandır.
      3. 
        
    3. Hesaplayın ve doğrulayın
      Araç eğimi, kesişimi, clamp() ifadelerini ve örnek viewport sonuçlarını aynı hesap nesnesinden üretir.
      4. 
        
    4. CSS’i kopyalayın
      İhtiyacınıza göre px veya rem clamp() ifadesini tek tıkla kopyalayın.
      5. 
      
    
    
    

    
    
      
    Örnek: 320–1280px arasında 16–24px
    
      
    
        
    Viewport 320px iken 16px, viewport 1280px iken 24px ve kök yazı boyutu 16px olsun.
    
        
      
          
    1. m = (24 − 16) / (1280 − 320) = 8 / 960 = 0.008333333… px/px
      2. 
          
    2. b = 16 − (0.008333333… × 320) = 13.333333…px
      3. 
          
    3. vw katsayısı = 100m = 0.833333333…
      4. 
          
    4. Tercih = 13.333333px + 0.833333vw
      5. 
          
    5. Alt ve üst sınırlar = 16px ve 24px
      6. 
        
    
        
    clamp(16px, 13.333333px + 0.833333vw, 24px)
    
        
    REM dönüşümü: 16 / 16 = 1rem, 13.333333… / 16 = 0.833333…rem ve 24 / 16 = 1.5rem. vw katsayısı rem’e çevrilmez.
    
        
    clamp(1rem, 0.833333rem + 0.833333vw, 1.5rem)
    
        
    800px doğrulaması: 13.333333… + (0.008333333… × 800) = 20px. 20px, 16–24px sınırları içinde olduğundan sıkıştırılmış sonuç da 20px’tir.
    
        
    CSS metnindeki sayılar seçilen basamakta yaklaşık gösterilir; ara hesaplarda yuvarlanmış değerler yeniden kullanılmaz.
    
      
    
    
    

    
    
      
    Sık hatalar
    
      
      
        
    • vw katsayısında ×100’ü unutmak
      m, px/px eğimidir; CSS’teki vw katsayısı 100m olur.
      • 
        
    • 16px’i zorunlu sanmak
      rem, kök yazı boyutuna bağlıdır; 16px yalnızca araç varsayılanıdır.
      • 
        
    • Viewport uçlarını eşit vermek
      Maksimum viewport minimumdan büyük olmalıdır.
      • 
        
    • Gösterim yuvarlamasını hesapta kullanmak
      Yuvarlama yalnızca gösterimde uygulanmalıdır.
      • 
        
    • Azalan ölçeği bozmak
      İkinci boyut küçükse negatif eğim geçerlidir.
      • 
        
    • Min/max sırasını terslemek
      Azalan ölçekte de alt sınır küçük, üst sınır büyük sayıdır.
      • 
      
    
    
    

    
    
      
    Kısa SSS
    
      
    
        
    
          1rem her zaman 16px midir?
          
    Hayır. 1rem, belgenin kök öğesinin hesaplanmış yazı boyutuna bağlıdır; bu araçta 16px yalnızca değiştirilebilir varsayılandır.
    
        
    
        
    
          Azalan ölçek kullanılabilir mi?
          
    Evet. İkinci boyut daha küçükse eğim ve vw katsayısı negatif olur; clamp sınırları yine küçükten büyüğe yazılır.
    
        
    
        
    
          Neden vw katsayısı 100 ile çarpılıyor?
          
    Çünkü CSS Values Level 4’te 1vw büyük viewport genişliğinin yüzde 1’idir; px/px eğimini vw katsayısına dönüştürmek için m × 100 kullanılır.
    
        
    
        
    
          Ondalık ayarı iç hesaplamayı etkiler mi?
          
    Hayır. Ara hesaplar JavaScript double hassasiyetiyle yapılır; ondalık ayarı yalnızca gösterilen ve kopyalanan sayıları biçimlendirir.
    
        
    
      
    
    
    

    
    
      
    Kaynaklar
    
      
    Birim tanımları W3C metninden; rekabet ve arama önerileri yalnız talep sinyali olarak kullanılmıştır.