Modern web tasar\u0131m\u0131nda tutarl\u0131, \u00f6l\u00e7eklenebilir ve eri\u015filebilir bo\u015fluk y\u00f6netimi, geli\u015ftiricilerin en b\u00fcy\u00fck zorluklar\u0131ndan biridir. Piksel tabanl\u0131 yakla\u015f\u0131mlar\u0131n getirdi\u011fi s\u0131n\u0131rlamalar\u0131 a\u015farak, duyarl\u0131 tasar\u0131mlarda \u00fcst\u00fcn bir kullan\u0131c\u0131 deneyimi sunmak i\u00e7in G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda, kullan\u0131c\u0131lar farkl\u0131 cihaz boyutlar\u0131 ve ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri \u00fczerinden web sitelerine eri\u015fiyor. Bu \u00e7e\u015fitlilik, geli\u015ftiricilerin tasar\u0131mlar\u0131n\u0131n her ortamda estetik ve i\u015flevsel kalmas\u0131n\u0131 sa\u011flamak ad\u0131na ciddi meydan okumalarla kar\u015f\u0131la\u015fmas\u0131na neden oluyor. Pek \u00e7ok geli\u015ftirici, elementler aras\u0131 bo\u015fluklar\u0131 belirlerken al\u0131\u015fkanl\u0131k haline gelmi\u015f bir y\u00f6ntem olan Bir an d\u00fc\u015f\u00fcn\u00fcn: Bir tasar\u0131m sistemi in\u015fa ettiniz ve t\u00fcm bo\u015fluklar\u0131 \u0130\u015fte tam da bu noktada, modern CSS’in sundu\u011fu g\u00fc\u00e7l\u00fc bir \u00e7\u00f6z\u00fcm olan CSS’te boyutland\u0131rma ve bo\u015fluk y\u00f6netimi i\u00e7in kullan\u0131lan bir\u00e7ok birim bulunur. Ancak en yayg\u0131n ve kar\u0131\u015ft\u0131r\u0131lanlar genellikle \u00d6zetle, Bu bir paragraf.<\/p> \n <\/code> \u00d6l\u00e7eklenebilirlik, bir tasar\u0131m\u0131n farkl\u0131 ekran boyutlar\u0131na ve \u00e7\u00f6z\u00fcn\u00fcrl\u00fcklerine sorunsuz bir \u015fekilde adapte olabilme yetene\u011fidir. K\u00fc\u00e7\u00fck ekranlarda daha kompakt bir tasar\u0131m istiyorsan\u0131z, <\/code><\/p>\n Bu \u00f6rnekte, sadece Eri\u015filebilirlik, web sitenizin t\u00fcm kullan\u0131c\u0131lar taraf\u0131ndan, yetenekleri veya kulland\u0131klar\u0131 cihazlar ne olursa olsun, kolayca kullan\u0131labilmesini sa\u011flamakt\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131 g\u00f6rme yetene\u011fi zay\u0131f oldu\u011fu i\u00e7in taray\u0131c\u0131s\u0131n\u0131n varsay\u0131lan yaz\u0131 tipi boyutunu Bu \u00f6zellik, Tasar\u0131m tutarl\u0131l\u0131\u011f\u0131, bir web sitesinin veya uygulamas\u0131n\u0131n farkl\u0131 b\u00f6l\u00fcmlerinde ve bile\u015fenlerinde g\u00f6rsel olarak uyumlu ve \u00f6ng\u00f6r\u00fclebilir olmas\u0131 anlam\u0131na gelir. Bir tasar\u0131m sisteminde, belirli bir bo\u015fluk \u00f6l\u00e7e\u011fi tan\u0131mlamak yayg\u0131n bir y\u00f6ntemdir. \u00d6rne\u011fin, <\/code><\/p>\n Yukar\u0131daki \u00f6rnekte CSS de\u011fi\u015fkenlerini (custom properties) kullanarak bir bo\u015fluk sistemi olu\u015fturduk. Bu yakla\u015f\u0131m\u0131n faydalar\u0131 \u015funlard\u0131r:<\/p>\n Bu \u015fekilde, Bir e-ticaret sitesi geli\u015ftirdi\u011finizi hayal edin. \u00dcr\u00fcn listelemeleri, kartlar, filtreler, navigasyon men\u00fcleri gibi bir\u00e7ok bile\u015fen bulunuyor. Bu bile\u015fenler aras\u0131ndaki bo\u015fluklar, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn d\u00fczenli ve okunabilir g\u00f6r\u00fcnmesi i\u00e7in kritik \u00f6neme sahiptir. Varsayal\u0131m ki ba\u015flang\u0131\u00e7ta t\u00fcm bo\u015fluklar\u0131 <\/code><\/p>\n Bu \u015eimdi ayn\u0131 e-ticaret sitesini <\/code><\/p>\n Bu Asl\u0131nda, Bu y\u00f6ntem, yaln\u0131zca bo\u015fluklar i\u00e7in de\u011fil, ayn\u0131 zamanda \u00c7o\u011fu taray\u0131c\u0131n\u0131n varsay\u0131lan rem<\/code> birimini varsay\u0131lan tercihiniz haline getirmeniz, projelerinizin gelece\u011fini \u015fekillendirebilir.<\/p>\npx<\/code> (piksel) birimini kullan\u0131r. Ancak, px<\/code> kullan\u0131m\u0131n\u0131n beraberinde getirdi\u011fi esneklik eksikli\u011fi, \u00f6zellikle duyarl\u0131 ve eri\u015filebilir web siteleri in\u015fa etme hedefinde \u00f6nemli engeller olu\u015fturabilir.<\/p>\npx<\/code> cinsinden belirlediniz. Proje ilerledik\u00e7e, mobil cihazlar i\u00e7in tasar\u0131mlarda ayarlamalar yapman\u0131z gerekti. Belki de bir kullan\u0131c\u0131, g\u00f6rme engeli nedeniyle taray\u0131c\u0131s\u0131n\u0131n varsay\u0131lan yaz\u0131 tipi boyutunu art\u0131rmak istedi. Bu senaryolarda px<\/code> birimleri, statik yap\u0131lar\u0131 nedeniyle adeta bir \u201ckilit\u201d g\u00f6revi g\u00f6r\u00fcr. Her bir bile\u015fen veya element i\u00e7in bo\u015fluk de\u011ferlerini tek tek manuel olarak ayarlamak, zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k bir s\u00fcre\u00e7tir. Bu durum, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k projelerde s\u00fcrd\u00fcr\u00fclebilirlik a\u00e7\u0131s\u0131ndan ciddi bir kabusa d\u00f6n\u00fc\u015febilir.<\/p>\nrem<\/code> birimi devreye giriyor. rem<\/code>, root em<\/code>‘in k\u0131saltmas\u0131d\u0131r ve belgenin k\u00f6k (html<\/code>) elementinin yaz\u0131 tipi boyutuna g\u00f6reli bir birimdir. Bu basit tan\u0131m, rem<\/code>‘in potansiyelini ilk bak\u0131\u015fta tam olarak yans\u0131tmayabilir, ancak do\u011fru anla\u015f\u0131ld\u0131\u011f\u0131nda, web geli\u015ftirme pratiklerimizi k\u00f6kten de\u011fi\u015ftirebilecek bir esneklik ve kontrol mekanizmas\u0131 sundu\u011funu g\u00f6rece\u011fiz. Bu makale boyunca, rem<\/code>‘in ne oldu\u011funu, neden px<\/code> ve em<\/code> gibi di\u011fer birimlerden daha \u00fcst\u00fcn oldu\u011funu ve modern CSS bo\u015fluk y\u00f6netimi stratejilerinizde neden varsay\u0131lan tercihiniz olmas\u0131 gerekti\u011fini detayl\u0131ca inceleyece\u011fiz. Uygulamal\u0131 \u00f6rnekler, ger\u00e7ek d\u00fcnya senaryolar\u0131 ve ileri d\u00fczey ipu\u00e7lar\u0131yla, rem<\/code> kullanarak nas\u0131l daha duyarl\u0131, eri\u015filebilir ve s\u00fcrd\u00fcr\u00fclebilir web tasar\u0131mlar\u0131 olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m ke\u015ffedece\u011fiz. Art\u0131k bo\u015fluk y\u00f6netimi kabusunuzu sona erdirme ve daha ak\u0131ll\u0131, daha verimli bir yakla\u015f\u0131m benimseme zaman\u0131 geldi.<\/p>\nTemel Kavramlar:
px<\/code>, em<\/code> ve rem<\/code> Aras\u0131ndaki Farklar Nelerdir?<\/h2>\npx<\/code>, em<\/code> ve rem<\/code>‘dir. Bu birimlerin farklar\u0131n\u0131 anlamak, neden rem<\/code>‘in bo\u015fluklar i\u00e7in en uygun se\u00e7im oldu\u011funu kavraman\u0131n temelini olu\u015fturur. Gelin, bu \u00fc\u00e7 temel birimi yak\u0131ndan inceleyelim.<\/p>\npx<\/code> (Piksel): Neden Statik Bir Se\u00e7imdir?<\/h3>\npx<\/code>, web tasar\u0131m\u0131nda uzun y\u0131llar boyunca en \u00e7ok tercih edilen birim olmu\u015ftur. “Piksel” kelimesi, bir ekran\u0131n en k\u00fc\u00e7\u00fck g\u00f6rsel noktas\u0131n\u0131 temsil eder ve px<\/code> birimi, genellikle bu fiziksel pikselle ili\u015fkilendirilir. \u00d6rne\u011fin, margin: 16px;<\/code> ifadesi, elementin etraf\u0131na 16 piksel bo\u015fluk ekler. \u0130lk bak\u0131\u015fta basit ve anla\u015f\u0131l\u0131r g\u00f6r\u00fcn\u00fcr, de\u011fil mi? Ancak, bu basitlik modern web’in gereksinimleri kar\u015f\u0131s\u0131nda yetersiz kal\u0131r.<\/p>\n\n
px<\/code>, taray\u0131c\u0131 ayarlar\u0131ndan veya ana elementlerin yaz\u0131 tipi boyutlar\u0131ndan ba\u011f\u0131ms\u0131z olarak her zaman ayn\u0131 fiziksel boyutu korur. Bu durum, \u00f6zellikle duyarl\u0131 tasar\u0131mlarda veya kullan\u0131c\u0131 eri\u015filebilirli\u011fi s\u00f6z konusu oldu\u011funda \u00f6nemli bir dezavantajd\u0131r.<\/li>\npx<\/code> ile tan\u0131mlanm\u0131\u015f bo\u015fluklar ve boyutlar de\u011fi\u015fmez. Bu durum, metin boyutlar\u0131 artarken bo\u015fluklar\u0131n sabit kalmas\u0131na, dolay\u0131s\u0131yla i\u00e7eri\u011fin daralmas\u0131na ve okunabilirli\u011fin azalmas\u0131na neden olabilir. Kullan\u0131c\u0131lar i\u00e7in k\u00f6t\u00fc bir deneyim sunar.<\/li>\npx<\/code> de\u011ferlerini tek tek manuel olarak g\u00fcncellemeniz gerekir. Bu, b\u00fcy\u00fck projelerde zaman al\u0131c\u0131, hataya a\u00e7\u0131k ve maliyetli bir s\u00fcre\u00e7tir.<\/li>\n<\/ul>\npx<\/code> birimi statik yap\u0131s\u0131yla basit projeler i\u00e7in h\u0131zl\u0131 \u00e7\u00f6z\u00fcmler sunabilse de, modern web geli\u015ftirmenin dinamik ve kullan\u0131c\u0131 odakl\u0131 gereksinimlerini kar\u015f\u0131lamakta yetersiz kal\u0131r.<\/p>\nem<\/code>: G\u00f6reli Ama Kademeli Mi?<\/h3>\nem<\/code> birimi, “M<\/code>” harfinin geni\u015fli\u011finden ad\u0131n\u0131 al\u0131r ve tan\u0131mland\u0131\u011f\u0131 elementin kendi yaz\u0131 tipi boyutuna g\u00f6reli bir \u00f6l\u00e7\u00fcd\u00fcr. \u00d6rne\u011fin, e\u011fer bir div<\/code> elementinin yaz\u0131 tipi boyutu 16px<\/code> ise ve bu div<\/code> i\u00e7indeki bir paragraf i\u00e7in padding: 1em;<\/code> belirlenmi\u015fse, bu padding<\/code> 16px<\/code> olacakt\u0131r. E\u011fer paragraf\u0131n kendi yaz\u0131 tipi boyutu 20px<\/code> olarak ayarlanm\u0131\u015f olsayd\u0131, o zaman 1em<\/code> 20px<\/code>‘e e\u015fit olurdu.<\/p>\n\n
em<\/code>, elementin kendi yaz\u0131 tipi boyutuna g\u00f6re \u00f6l\u00e7eklenir. Bu, baz\u0131 durumlarda esneklik sa\u011flayabilir.<\/li>\nem<\/code>‘in en b\u00fcy\u00fck dezavantaj\u0131 “kademeli \u00f6l\u00e7eklenme” (compounding effect) sorunudur. \u0130\u00e7 i\u00e7e ge\u00e7mi\u015f elementlerde em<\/code> kulland\u0131\u011f\u0131n\u0131zda, her bir elementin em<\/code> de\u011feri bir \u00fcst elementin yaz\u0131 tipi boyutuna ba\u011fl\u0131 olarak hesaplan\u0131r. Bu durum, beklenen de\u011ferden farkl\u0131 sonu\u00e7lar do\u011furabilir ve hata ay\u0131klamay\u0131 zorla\u015ft\u0131r\u0131r. \u00d6rne\u011fin:\n\n
\n G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, span<\/code> elementinin padding<\/code> de\u011feri, d\u0131\u015ftaki div<\/code>'in yaz\u0131 tipi boyutundan de\u011fil, hemen \u00fcst\u00fcndeki div<\/code>'in yaz\u0131 tipi boyutundan etkilenir. Bu karma\u015f\u0131kl\u0131k, tutarl\u0131 bir bo\u015fluk sistemi kurmay\u0131 g\u00fc\u00e7le\u015ftirir.\n <\/li>\n<\/ul>\nem<\/code>, baz\u0131 ni\u015f durumlar i\u00e7in (\u00f6rne\u011fin, metinle ili\u015fkili dikey bo\u015fluklar veya bile\u015fenlerin kendi i\u00e7indeki metin boyutuna g\u00f6re ayarlanmas\u0131 gereken durumlarda) faydal\u0131 olabilir, ancak genel bo\u015fluk y\u00f6netimi i\u00e7in \u00f6nerilmez.<\/p>\nrem<\/code> (Root em): Neden Yeni Varsay\u0131lan\u0131n\u0131z Olmal\u0131?<\/h3>\nrem<\/code>, \"root em\"in k\u0131saltmas\u0131d\u0131r ve ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, belgenin k\u00f6k elementi olan html<\/code> elementinin yaz\u0131 tipi boyutuna g\u00f6reli bir birimdir. Bu temel fark, rem<\/code>'i hem px<\/code>'ten daha esnek hem de em<\/code>'den daha \u00f6ng\u00f6r\u00fclebilir k\u0131lar.<\/p>\n\n
rem<\/code>, her zaman html<\/code> elementinin yaz\u0131 tipi boyutuna referans verir. Bu, i\u00e7 i\u00e7e ge\u00e7mi\u015f elementlerin birbirini etkilemeden tutarl\u0131 bo\u015fluklara sahip olmas\u0131n\u0131 sa\u011flar. Karma\u015f\u0131k bir kademeli \u00f6l\u00e7eklenme sorunu ya\u015fanmaz.<\/li>\n16px<\/code>'tir, ancak kullan\u0131c\u0131lar bunu de\u011fi\u015ftirebilir) art\u0131rd\u0131\u011f\u0131nda, html<\/code> elementinin yaz\u0131 tipi boyutu da buna g\u00f6re \u00f6l\u00e7eklenir. rem<\/code> ile tan\u0131mlanm\u0131\u015f t\u00fcm bo\u015fluklar, element boyutlar\u0131 ve metinler de bu de\u011fi\u015fikli\u011fe uyum sa\u011flar. Bu, web sitenizin farkl\u0131 g\u00f6rme yetene\u011fine sahip kullan\u0131c\u0131lar i\u00e7in bile eri\u015filebilir ve kullan\u0131labilir kalmas\u0131n\u0131 garanti eder.<\/li>\nrem<\/code> kullanarak tan\u0131mlad\u0131\u011f\u0131n\u0131zda, sitenizin genel boyutlar\u0131n\u0131 veya duyarl\u0131l\u0131k ayarlar\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in tek yapman\u0131z gereken html<\/code> elementinin font-size<\/code> \u00f6zelli\u011fini g\u00fcncellemektir. Bu sayede, t\u00fcm site genelindeki bo\u015fluklar tek bir yerden kolayca \u00f6l\u00e7eklenebilir ve bak\u0131m maliyeti d\u00fc\u015fer.<\/li>\nhtml<\/code> elementinin font-size<\/code> de\u011ferini farkl\u0131 ekran boyutlar\u0131na g\u00f6re ayarlayarak, sitenizin genel \u00f6l\u00e7e\u011fini dinamik olarak de\u011fi\u015ftirebilirsiniz. Bu, mobil cihazlarda daha b\u00fcy\u00fck, masa\u00fcst\u00fcnde daha k\u00fc\u00e7\u00fck veya tam tersi bo\u015fluklar tan\u0131mlaman\u0131z\u0131 \u00e7ok daha kolay hale getirir.<\/li>\n<\/ul>\nrem<\/code>, px<\/code>'in statik yap\u0131s\u0131ndan ve em<\/code>'in kademeli \u00f6l\u00e7eklenme karma\u015fas\u0131ndan ka\u00e7\u0131narak, modern web geli\u015ftirme i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir temel sunar. Bu birim, bo\u015fluk y\u00f6netimi ba\u015fta olmak \u00fczere, genel tasar\u0131m sistemlerinin olu\u015fturulmas\u0131nda merkezi bir rol oynamal\u0131d\u0131r.<\/p>\nfont-size<\/code> de\u011feri 16px<\/code>'tir. Bu nedenle, 1rem<\/code> genellikle 16px<\/code>'e e\u015fittir. Ancak bu de\u011feri html { font-size: 62.5%; }<\/code> \u015feklinde ayarlayarak 1rem = 10px<\/code> yapabilirsiniz. Bu sayede, 1.5rem<\/code> = 15px<\/code> gibi matematiksel hesaplamalar\u0131 \u00e7ok daha kolay hale getirirsiniz.\n <\/div>\nNeden
rem<\/code> Bo\u015fluklar \u0130\u00e7in En \u0130yi Se\u00e7imdir? \u00d6l\u00e7eklenebilirlik, Eri\u015filebilirlik ve Tutarl\u0131l\u0131k<\/h2>\nrem<\/code> biriminin, px<\/code> ve em<\/code>'e k\u0131yasla sundu\u011fu avantajlar sadece teorik de\u011fil, modern web geli\u015ftirmenin temel direkleri olan \u00f6l\u00e7eklenebilirlik, eri\u015filebilirlik ve tasar\u0131m tutarl\u0131l\u0131\u011f\u0131 a\u00e7\u0131s\u0131ndan da somut faydalar sa\u011flar. Bo\u015fluklar\u0131n\u0131z\u0131 rem<\/code> ile tan\u0131mlamak, projenizin gelece\u011fe haz\u0131r, kullan\u0131c\u0131 dostu ve bak\u0131m\u0131 kolay olmas\u0131n\u0131 garantiler.<\/p>\nrem<\/code> ile \u00d6l\u00e7eklenebilir ve Eri\u015filebilir Bo\u015fluklar Nas\u0131l Olu\u015fturulur?<\/h3>\nrem<\/code> biriminin en \u00e7arp\u0131c\u0131 \u00f6zelliklerinden biri, hem \u00f6l\u00e7eklenebilirli\u011fi hem de eri\u015filebilirli\u011fi do\u011fal olarak desteklemesidir. Bu iki \u00f6zellik, modern web tasar\u0131m\u0131nda vazge\u00e7ilmezdir ve rem<\/code>, bu konularda size tam kontrol sa\u011flar.<\/p>\n\u00d6l\u00e7eklenebilirlik ve Duyarl\u0131l\u0131k<\/h4>\n
rem<\/code> kullanarak, bu s\u00fcreci inan\u0131lmaz derecede basitle\u015ftirebilirsiniz. \u00d6rne\u011fin, sitenizde bir standart bo\u015fluk \u00f6l\u00e7e\u011fi belirleyebilirsiniz (0.5rem<\/code>, 1rem<\/code>, 1.5rem<\/code>, 2rem<\/code> vb.). Bu \u00f6l\u00e7eklendirme, html<\/code> elementinin font-size<\/code>'\u0131n\u0131 de\u011fi\u015ftirerek t\u00fcm site genelinde ayn\u0131 anda uygulanabilir.<\/p>\nhtml<\/code> elementinin varsay\u0131lan font-size<\/code>'\u0131n\u0131 d\u00fc\u015f\u00fcrebilirsiniz. B\u00fcy\u00fck ekranlarda ise daha geni\u015f bo\u015fluklar i\u00e7in art\u0131rabilirsiniz. \u0130\u015fte bir \u00f6rnek:<\/p>\n\n\/* Taray\u0131c\u0131 varsay\u0131lan\u0131 16px oldu\u011fu i\u00e7in 1rem = 10px olur *\/\nhtml {\n font-size: 62.5%; \/* 10px *\/\n}\n\n\/* Varsay\u0131lan bo\u015fluklar *\/\n.card {\n margin-bottom: 2rem; \/* 20px *\/\n padding: 1.5rem; \/* 15px *\/\n}\n\n\/* Mobil cihazlar i\u00e7in (\u00f6rne\u011fin 768px alt\u0131) *\/\n@media (max-width: 768px) {\n html {\n font-size: 50%; \/* 8px - Her \u015fey daha k\u00fc\u00e7\u00fck g\u00f6r\u00fcn\u00fcr, 1rem = 8px *\/\n }\n .card {\n margin-bottom: 1.5rem; \/* 12px (\u00f6nceden 20px idi) *\/\n padding: 1rem; \/* 8px (\u00f6nceden 15px idi) *\/\n }\n}\n\n\/* \u00c7ok geni\u015f ekranlar i\u00e7in (\u00f6rne\u011fin 1440px \u00fcst\u00fc) *\/\n@media (min-width: 1440px) {\n html {\n font-size: 75%; \/* 12px - Her \u015fey biraz daha b\u00fcy\u00fck g\u00f6r\u00fcn\u00fcr, 1rem = 12px *\/\n }\n .card {\n margin-bottom: 2.5rem; \/* 30px (\u00f6nceden 20px idi) *\/\n padding: 2rem; \/* 24px (\u00f6nceden 15px idi) *\/\n }\n}\n <\/pre>\nhtml<\/code> elementinin font-size<\/code> de\u011ferini de\u011fi\u015ftirerek, t\u00fcm rem<\/code> tabanl\u0131 bo\u015fluklar\u0131n ve potansiyel olarak di\u011fer boyutlar\u0131n (line-height<\/code>, font-size<\/code> gibi) ayn\u0131 anda \u00f6l\u00e7eklenmesini sa\u011fl\u0131yoruz. Bu, CSS kodunuzu sadele\u015ftirir ve bak\u0131m maliyetlerini d\u00fc\u015f\u00fcr\u00fcr.<\/p>\n\u00dcst\u00fcn Eri\u015filebilirlik<\/h4>\n
rem<\/code>'in bu konudaki en b\u00fcy\u00fck avantaj\u0131, kullan\u0131c\u0131lar\u0131n taray\u0131c\u0131 ayarlar\u0131ndaki varsay\u0131lan yaz\u0131 tipi boyutunu de\u011fi\u015ftirdi\u011finde, sitenizdeki t\u00fcm rem<\/code> de\u011ferlerinin bu de\u011fi\u015fikli\u011fe otomatik olarak adapte olmas\u0131d\u0131r.<\/p>\n16px<\/code>'ten 24px<\/code>'e \u00e7\u0131kard\u0131\u011f\u0131nda, rem<\/code> ile tan\u0131mlanm\u0131\u015f t\u00fcm bo\u015fluklar\u0131n\u0131z, metinleriniz ve di\u011fer element boyutlar\u0131n\u0131z da buna orant\u0131l\u0131 olarak b\u00fcy\u00fcr. Bu, i\u00e7eri\u011fin daha geni\u015f bo\u015fluklarla birlikte okunabilirli\u011fini art\u0131r\u0131r ve kullan\u0131c\u0131n\u0131n sayfay\u0131 daha rahat gezinmesini sa\u011flar. px<\/code> kullansayd\u0131k, metin b\u00fcy\u00fcrken bo\u015fluklar sabit kal\u0131r, bu da tasar\u0131m\u0131n bozulmas\u0131na ve kullan\u0131c\u0131n\u0131n zorlanmas\u0131na neden olurdu.<\/p>\nrem<\/code>'i sadece duyarl\u0131 tasar\u0131mlar i\u00e7in de\u011fil, ayn\u0131 zamanda WCAG (Web \u0130\u00e7eri\u011fi Eri\u015filebilirlik Y\u00f6nergeleri) standartlar\u0131na uyumlu, kapsay\u0131c\u0131 web siteleri olu\u015fturmak i\u00e7in de vazge\u00e7ilmez bir ara\u00e7 haline getirir.<\/p>\nTasar\u0131m Tutarl\u0131l\u0131\u011f\u0131 \u0130\u00e7in
rem<\/code> Temelli Bir Sistem Kurmak<\/h3>\nrem<\/code>, bo\u015fluklar i\u00e7in bir \"tasar\u0131m token\u0131\" olarak kullan\u0131larak bu tutarl\u0131l\u0131\u011f\u0131 sa\u011flamak i\u00e7in m\u00fckemmel bir temel sunar.<\/p>\n0.5rem<\/code> (k\u00fc\u00e7\u00fck), 1rem<\/code> (orta), 1.5rem<\/code> (b\u00fcy\u00fck), 2rem<\/code> (ekstra b\u00fcy\u00fck) gibi. Bu de\u011ferleri do\u011frudan elementlerinize uygulayarak, t\u00fcm sitenizde ayn\u0131 \"ritmi\" yakalayabilirsiniz. Bu yakla\u015f\u0131m, rastgele px<\/code> de\u011ferleri kullanmak yerine, tasar\u0131m\u0131n\u0131zda belirli bir d\u00fczen ve \u00f6ng\u00f6r\u00fclebilirlik sa\u011flar.<\/p>\n\n:root { \/* veya html *\/\n --spacing-xs: 0.5rem;\n --spacing-sm: 1rem;\n --spacing-md: 1.5rem;\n --spacing-lg: 2rem;\n --spacing-xl: 3rem;\n}\n\n.button {\n padding: var(--spacing-sm) var(--spacing-md); \/* 1rem dikey, 1.5rem yatay *\/\n margin-top: var(--spacing-lg); \/* 2rem *\/\n}\n\n.card-header {\n margin-bottom: var(--spacing-sm); \/* 1rem *\/\n}\n\n.card-body {\n padding: var(--spacing-md); \/* 1.5rem *\/\n}\n <\/pre>\n\n
:root<\/code> i\u00e7indeki de\u011fi\u015fkeni g\u00fcncellersiniz ve bu de\u011fi\u015fiklik t\u00fcm siteye yans\u0131r.<\/li>\nmargin-top: var(--spacing-lg);<\/code> gibi ifadeler, margin-top: 32px;<\/code>'ten \u00e7ok daha a\u00e7\u0131klay\u0131c\u0131d\u0131r. Bu, di\u011fer geli\u015ftiricilerin kodu anlamas\u0131n\u0131 ve s\u00fcrd\u00fcrmesini kolayla\u015ft\u0131r\u0131r.<\/li>\nrem<\/code> sadece bir \u00f6l\u00e7\u00fc birimi olmaktan \u00e7\u0131kar ve web sitenizin temel mimarisinin bir par\u00e7as\u0131 haline gelir. Tasar\u0131mc\u0131lar ve geli\u015ftiriciler aras\u0131ndaki ileti\u015fimi g\u00fc\u00e7lendirir, i\u015f ak\u0131\u015flar\u0131n\u0131 h\u0131zland\u0131r\u0131r ve nihayetinde daha tutarl\u0131, eri\u015filebilir ve s\u00fcrd\u00fcr\u00fclebilir \u00fcr\u00fcnler ortaya koyman\u0131z\u0131 sa\u011flar.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131:
rem<\/code> Kullanarak Mobil Duyarl\u0131 Tasar\u0131mlar Nas\u0131l Yap\u0131l\u0131r?<\/h2>\nrem<\/code> biriminin g\u00fcc\u00fcn\u00fc en iyi g\u00f6steren alanlardan biri, \u015f\u00fcphesiz mobil duyarl\u0131 (responsive) web tasar\u0131mlar\u0131d\u0131r. Farkl\u0131 ekran boyutlar\u0131 ve cihazlar i\u00e7in esnek ve adapte olabilen aray\u00fczler olu\u015fturmak, modern web geli\u015ftirmenin vazge\u00e7ilmez bir par\u00e7as\u0131d\u0131r. rem<\/code>, bu s\u00fcreci basitle\u015ftirirken ayn\u0131 zamanda kullan\u0131c\u0131 deneyimini de optimize eder.<\/p>\nVaka Analizi: E-ticaret Sitesinde Bo\u015fluk Y\u00f6netimi<\/h3>\n
px<\/code> ile belirlediniz. Masa\u00fcst\u00fc g\u00f6r\u00fcn\u00fcm\u00fc harika, ancak mobil cihazlarda her \u015fey \u00e7ok s\u0131k\u0131\u015f\u0131k g\u00f6r\u00fcn\u00fcyor veya tam tersi, tabletlerde \u00e7ok fazla bo\u015fluk var.<\/p>\npx<\/code> ile Yakla\u015f\u0131m (Sorunlu Senaryo):<\/strong><\/p>\n\n\/* Ortak bile\u015fenler *\/\n.product-card {\n margin-bottom: 20px;\n padding: 15px;\n}\n\n.filter-sidebar {\n padding: 25px;\n margin-right: 30px; \/* Sadece masa\u00fcst\u00fc i\u00e7in uygun *\/\n}\n\n\/* Mobil i\u00e7in d\u00fczeltmeler (px ile) *\/\n@media (max-width: 768px) {\n .product-card {\n margin-bottom: 10px; \/* Tekrar ayarla *\/\n padding: 10px; \/* Tekrar ayarla *\/\n }\n .filter-sidebar {\n padding: 15px; \/* Tekrar ayarla *\/\n margin-right: 0; \/* Tekrar ayarla *\/\n margin-bottom: 20px; \/* Yeni bir bo\u015fluk ekle *\/\n }\n \/* Ve di\u011fer t\u00fcm bile\u015fenler... *\/\n}\n <\/pre>\npx<\/code> tabanl\u0131 yakla\u015f\u0131mda, her bir k\u0131r\u0131lma noktas\u0131 (breakpoint) i\u00e7in belirli bile\u015fenlerin bo\u015fluk de\u011ferlerini tek tek manuel olarak ayarlaman\u0131z gerekir. Bu, uzun vadede s\u00fcrd\u00fcr\u00fclemez bir durumdur. Yeni bir bile\u015fen ekledi\u011finizde veya genel bir tasar\u0131m de\u011fi\u015fikli\u011fi gerekti\u011finde, t\u00fcm media query'leri g\u00f6zden ge\u00e7irmeniz ve potansiyel olarak d\u00fczinelerce de\u011feri g\u00fcncellemeniz gerekir.<\/p>\nrem<\/code> ile Yakla\u015f\u0131m (Optimize Edilmi\u015f Senaryo):<\/strong><\/p>\nrem<\/code> kullanarak nas\u0131l daha verimli bir \u015fekilde y\u00f6netebilece\u011fimize bakal\u0131m. Anahtar nokta, html<\/code> elementinin font-size<\/code> de\u011ferini bir referans olarak kullanmak ve bunu media query'ler arac\u0131l\u0131\u011f\u0131yla dinamik olarak de\u011fi\u015ftirmektir.<\/p>\n\n\/* Varsay\u0131lan olarak 1rem = 10px (taray\u0131c\u0131 varsay\u0131lan\u0131 16px \u00fczerinden 62.5% ile) *\/\nhtml {\n font-size: 62.5%;\n}\n\n\/* Masa\u00fcst\u00fc i\u00e7in varsay\u0131lan bo\u015fluklar (\u00f6rne\u011fin 1rem = 10px) *\/\n.product-card {\n margin-bottom: 2rem; \/* 20px *\/\n padding: 1.5rem; \/* 15px *\/\n}\n\n.filter-sidebar {\n padding: 2.5rem; \/* 25px *\/\n margin-right: 3rem; \/* 30px *\/\n}\n\n\/* Tablet boyutlar\u0131 i\u00e7in (\u00f6rne\u011fin 768px - 1024px aras\u0131) *\/\n@media (max-width: 1024px) {\n html {\n font-size: 56.25%; \/* 1rem = 9px. T\u00fcm bo\u015fluklar %10 k\u00fc\u00e7\u00fcl\u00fcr. *\/\n }\n .filter-sidebar {\n margin-right: 2rem; \/* 18px (\u00f6nceden 30px idi, otomatik k\u00fc\u00e7\u00fcld\u00fc) *\/\n }\n}\n\n\/* Mobil boyutlar\u0131 i\u00e7in (\u00f6rne\u011fin 768px alt\u0131) *\/\n@media (max-width: 768px) {\n html {\n font-size: 50%; \/* 1rem = 8px. T\u00fcm bo\u015fluklar %20 k\u00fc\u00e7\u00fcl\u00fcr. *\/\n }\n .product-card {\n margin-bottom: 1.5rem; \/* 12px (\u00f6nceden 20px idi, \u015fimdi 1.5rem * 8px) *\/\n padding: 1rem; \/* 8px (\u00f6nceden 15px idi, \u015fimdi 1rem * 8px) *\/\n }\n .filter-sidebar {\n margin-right: 0;\n margin-bottom: 2.5rem; \/* 20px (\u00f6nceden 30px idi, \u015fimdi 2.5rem * 8px) *\/\n }\n}\n <\/pre>\nrem<\/code> tabanl\u0131 yakla\u015f\u0131mla, sitenizin genel \u00f6l\u00e7e\u011fini sadece html<\/code> elementinin font-size<\/code> de\u011ferini de\u011fi\u015ftirerek kontrol edebilirsiniz. \u0130lk \u00f6rnekte .product-card<\/code>'\u0131n margin-bottom<\/code>'unu 20px<\/code>'ten 10px<\/code>'e d\u00fc\u015f\u00fcrmek i\u00e7in 10px<\/code> olarak tekrar tan\u0131mlaman\u0131z gerekirken, rem<\/code> \u00f6rne\u011finde html<\/code>'nin font-size<\/code>'\u0131n\u0131 62.5%<\/code>'ten 50%<\/code>'ye d\u00fc\u015f\u00fcrerek ayn\u0131 etkiyi (2rem 20px'ten 16px'e d\u00fc\u015fer, daha da k\u00fc\u00e7\u00fcltmek i\u00e7in de\u011feri 1.5rem yapabilirsiniz) \u00e7ok daha genel bir \u015fekilde elde edebilirsiniz.<\/p>\n.product-card<\/code>'\u0131n margin-bottom: 2rem;<\/code> de\u011feri media query'de hi\u00e7 de\u011fi\u015ftirilmeden b\u0131rak\u0131lsa bile, html<\/code>'nin font-size<\/code>'\u0131 50%<\/code> oldu\u011funda bu de\u011fer otomatik olarak 2 * 8px = 16px<\/code>'e d\u00f6n\u00fc\u015fecektir. Bu, kod tekrar\u0131n\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r ve bak\u0131m\u0131n\u0131 basitle\u015ftirir. E\u011fer belirli bir bile\u015fenin bo\u015flu\u011funun orant\u0131l\u0131 olarak \u00f6l\u00e7eklenmesini istemiyorsan\u0131z, o zaman o bile\u015fenin \u00f6zel rem<\/code> de\u011ferini media query i\u00e7inde yeniden tan\u0131mlayabilirsiniz, ancak genel \u00f6l\u00e7eklendirme i\u00e7in sadece html<\/code> font-size<\/code>'\u0131n\u0131 de\u011fi\u015ftirmek genellikle yeterlidir.<\/p>\nfont-size<\/code>, line-height<\/code> ve di\u011fer g\u00f6reli boyutland\u0131rmalar i\u00e7in de ge\u00e7erlidir. T\u00fcm tasar\u0131m sistemi, tek bir anahtar de\u011fer etraf\u0131nda d\u00f6ner, bu da tutarl\u0131l\u0131\u011f\u0131 art\u0131r\u0131r ve karma\u015f\u0131kl\u0131\u011f\u0131 azalt\u0131r. Ger\u00e7ek d\u00fcnyada, bu, geli\u015ftirme h\u0131z\u0131n\u0131z\u0131 art\u0131r\u0131r, hata oranlar\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr ve son kullan\u0131c\u0131lara daha tutarl\u0131 ve eri\u015filebilir bir deneyim sunar.<\/p>\n\u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar:
rem<\/code> Tabanl\u0131 Bo\u015fluk Y\u00f6netimini Nas\u0131l Geli\u015ftirirsiniz?<\/h2>\nrem<\/code> birimini projelerinizde etkin bir \u015fekilde kullanmak, sadece birim de\u011fi\u015fikli\u011fi yapmaktan daha fazlas\u0131n\u0131 gerektirir. En iyi uygulamalar\u0131 ve baz\u0131 ileri d\u00fczey teknikleri benimseyerek, rem<\/code>'in sundu\u011fu t\u00fcm avantajlardan faydalanabilir ve daha g\u00fc\u00e7l\u00fc, daha s\u00fcrd\u00fcr\u00fclebilir bir tasar\u0131m sistemi olu\u015fturabilirsiniz.<\/p>\n1. Taray\u0131c\u0131 Varsay\u0131lan\u0131n\u0131 S\u0131f\u0131rlama ve Kolay Hesaplama:<\/h3>\n
font-size<\/code> de\u011feri 16px<\/code>'tir. Bu, 1rem<\/code>'in 16px<\/code>'e e\u015fit oldu\u011fu anlam\u0131na gelir. Ancak, 10px<\/code> \u00fczerinden matematik yapmak genellikle daha kolayd\u0131r. Bunu sa\u011flamak i\u00e7in html<\/code> elementinin font-size<\/code>'\u0131n\u0131 62.5%<\/code> olarak ayarlayabilirsiniz. (16px * 0.625 = 10px<\/code>).<\/p>\n\nhtml {\n font-size: 62.5%; \/* Art\u0131k 1rem = 10px *\/\n}\n\nbody {\n font-size: 1.6rem; \/* V\u00fccut metni 16px olarak kal\u0131r (1.6 * 10px = 16px) *\/\n}\n\nh1 {\n font-size: 3.2rem; \/* 32px *\/\n}\n\np {\n margin-bottom: 1.5rem; \/* 15px *\/\n}\n <\/pre>\n