Nexsol Araçları · Web

Responsive Breakpoint Test

Tarayıcı penceresinin canlı genişliğini ölçün, hangi Tailwind ve Bootstrap kırılım noktasında (breakpoint) olduğunuzu anında görün ve sitenizi farklı cihaz genişliklerinde önizleyin. Ücretsiz, kurulumsuz.

Canlı viewport

—×—px

Pencereyi yeniden boyutlandırın; değerler ve aktif kırılım anlık güncellenir.

Tailwind—

Bootstrap—

base≥ 0px

sm≥ 640px

md≥ 768px

lg≥ 1024px

xl≥ 1280px

2xl≥ 1536px

Yaygın cihaz genişlikleri (referans)

Cihaz sınıfıÖrnekGenişlik (px)

MobiliPhone SE / küçük telefon375

MobiliPhone 14 / 15 Pro393

MobilBüyük telefon (Android)412

TabletiPad Mini (dikey)768

TabletiPad Pro 11" (dikey)834

DizüstüKüçük laptop / netbook1024

DizüstüYaygın laptop (HD)1366

MasaüstüFull HD masaüstü1920

MasaüstüQHD / geniş ekran2560

URL önizleme (farklı genişliklerde)

Önizlenecek adres

Not: Bazı siteler X-Frame-Options veya Content-Security-Policy başlıklarıyla iframe içinde gömülmeyi engeller; bu durumda önizleme boş kalabilir.

375px

Bir adres girip “Yükle”ye basın; seçtiğiniz genişlikte önizlenecek.

Breakpoint nedir, neden önemlidir?

Breakpoint (kırılım noktası), responsive bir tasarımın düzenini değiştirdiği belirli ekran genişliğidir. CSS medya sorgularıyla tanımlanır; genişlik bir eşiği geçtiğinde kolon sayısı, yazı boyutu, menü yapısı gibi öğeler yeniden düzenlenir.

Modern yaklaşım mobile-first'tür: temel stiller en küçük ekrana göre yazılır, ardından min-width medya sorgularıyla büyük ekranlar için katman eklenir. Böylece mobil performans korunur ve düzen yukarı doğru genişler.

Tailwind CSS: sm 640 · md 768 · lg 1024 · xl 1280 · 2xl 1536 px
Bootstrap 5: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400 px

Sitenizi bu eşiklerin hemen altında ve üstünde test etmek, taşma (overflow), bozulan menü ve okunamayan metin gibi sorunları yakalamanın en hızlı yoludur.

Sık sorulan sorular

Breakpoint (kırılım noktası) nedir?

Breakpoint, responsive tasarımın düzenini değiştirdiği belirli ekran genişliğidir. CSS medya sorgularıyla tanımlanır; genişlik bu eşiği geçince kolon sayısı, yazı boyutu veya menü yapısı gibi öğeler yeniden düzenlenir.

Yaygın responsive kırılımlar hangileridir?

Pratikte ≤640px mobil, 641–1024px tablet, 1025–1440px dizüstü, ≥1441px masaüstü kabul edilir. Framework eşikleri farklıdır: Tailwind sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536; Bootstrap 5 sm 576 / md 768 / lg 992 / xl 1200 / xxl 1400 px.

Mobile-first tasarım ne demek?

Mobile-first, temel stillerin en küçük ekrana göre yazılıp büyük ekranlar için min-width medya sorgularıyla katman eklenmesidir. Mobil performansı korur ve düzenin yukarı doğru, kontrollü biçimde genişlemesini sağlar.

Breakpoint testi neden gereklidir?

Çünkü bir düzen bir genişlikte kusursuz görünürken eşiğin hemen altında veya üstünde bozulabilir: yatay taşma, üst üste binen öğeler, okunamayan metin veya bozulan menü ortaya çıkar. Eşiklerin etrafında test etmek bu sorunları en hızlı yakalama yoludur.

Önizleme neden boş kalıyor?

Bazı siteler X-Frame-Options veya Content-Security-Policy (frame-ancestors) başlıklarıyla başka sayfalara iframe olarak gömülmeyi engeller. Bu güvenlik politikası nedeniyle önizleme boş görünür; bu aracın değil, hedef sitenin ayarıdır.

Tailwind breakpoint değerleri nedir?

Tailwind CSS varsayılan kırılımları min-width olarak şöyledir: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px. Bu eşiklerin altındaki genişlik 'base' (öneksiz) katmandır. Değerler tailwind.config dosyasından özelleştirilebilir.

Web tasarım

Tüm cihazlarda kusursuz web sitenizi uzmanına kurdurun

Web Çözümleri Ücretsiz Teklif

Responsive tasarım, performans ve kurumsal web; her ekranda mükemmel görünüm.