{"id":3955,"date":"2026-10-14T18:49:07","date_gmt":"2026-10-14T17:49:07","guid":{"rendered":"https:\/\/wpcalc.com\/tr\/birim-ceviriciler\/css-birim-donusturucu\/"},"modified":"2026-10-14T18:49:07","modified_gmt":"2026-10-14T17:49:07","slug":"css-birim-donusturucu","status":"publish","type":"post","link":"https:\/\/wpcalc.com\/tr\/birim-ceviriciler\/css-birim-donusturucu\/","title":{"rendered":"CSS Birim D\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc"},"content":{"rendered":"<section class=\"not-prose calculator-box\" aria-labelledby=\"calculator-title\"><div class=\"flex items-baseline sm:items-center justify-between gap-2 sm:gap-3\"><div class=\"flex flex-col sm:flex-row sm:items-center gap-2\"><span class=\"icon icon-calculator text-primary-700! text-base! dark:text-primary-300!\" aria-hidden=\"true\"><\/span><h2 id=\"calculator-title\" class=\"text-lg font-display font-bold\">px, rem, em, vw ve vh Aras\u0131nda D\u00f6n\u00fc\u015ft\u00fcrme<\/h2><\/div><div class=\"calcdash-favorite group\">\n  <button type=\"button\" class=\"favorite\" id=\"favorite\" data-favorite-id=\"3955\" data-favorite-title=\"CSS Birimleri\" data-favorite-url=\"https:\/\/wpcalc.com\/tr\/birim-ceviriciler\/css-birim-donusturucu\/\" data-favorite-excerpt=\"Bir CSS uzunlu\u011funu px, rem, em, vw, vh, pt ve y\u00fczde aras\u0131nda d\u00f6n\u00fc\u015ft\u00fcr\u00fcn. De\u011feri girin, birimini se\u00e7in, k\u00f6k ve \u00fcst \u00f6\u011fe yaz\u0131 tipi boyutlar\u0131 ile g\u00f6r\u00fcn\u00fcm alan\u0131 \u00f6l\u00e7\u00fclerini ayarlay\u0131n; t\u00fcm kar\u015f\u0131l\u0131klar\u0131 tek seferde al\u0131n.\" aria-label=\"Favorilere ekle\" data-favorite-icon=\"icon icon-other\">\n    <span class=\"icon icon-shape-star-empty\" aria-hidden=\"true\"><\/span>\n  <\/button>\n  <div class=\"calcdash-favorite__tip\" aria-hidden=\"true\">\n   <span class=\"favorite-tooltip\" id=\"favorite-tooltip\"><\/span>\n  <\/div>\n  <span class=\"sr-only\" role=\"status\" id=\"favorite-status\"><\/span>\n<\/div><\/div><form action=\"https:\/\/wpcalc.com\/tr\/birim-ceviriciler\/css-birim-donusturucu\/\" method=\"POST\" class=\"calculator\" id=\"calculator-3955\" data-post=\"3955\"><fieldset class=\"fieldset-input is-1\"><legend class=\"sr-only\">Giri\u015f alanlar\u0131<\/legend><div class=\"field has-term\" id=\"input-1\"><label for=\"field-1\">De\u011fer<\/label><div class=\"term\">v<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"number\" name=\"deer\" id=\"field-1\" aria-describedby=\"calc-info-1\" placeholder=\"e.g. 24\" step=\"any\" value=\"24\"\/><small id=\"calc-info-1\">D\u00f6n\u00fc\u015ft\u00fcrmek istedi\u011finiz uzunluk. Negatif de\u011ferler (\u00f6rne\u011fin negatif margin) kullan\u0131labilir.<\/small><\/div><div class=\"field\" id=\"input-2\"><label for=\"field-2\">CSS birimi<\/label><div class=\"grid grid-cols-1\"><select id=\"field-2\" name=\"css_birimi\"><option value=\"px\" selected>px (piksel)<\/option><option value=\"rem\">rem (k\u00f6k em)<\/option><option value=\"em\">em (\u00fcst \u00f6\u011fenin yaz\u0131 tipi boyutuna g\u00f6re)<\/option><option value=\"vw\">vw (g\u00f6r\u00fcnt\u00fc alan\u0131 geni\u015fli\u011fi)<\/option><option value=\"vh\">vh (g\u00f6r\u00fcnt\u00fc alan\u0131 y\u00fcksekli\u011fi)<\/option><option value=\"pt\">pt (punto)<\/option><option value=\"%\">% (\u00fcst \u00f6\u011fenin yaz\u0131 tipi boyutunun y\u00fczdesi)<\/option><\/select><svg class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4\" viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n              <path fill-rule=\"evenodd\" d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" \/>\n            <\/svg><\/div><\/div><div class=\"field has-term\" id=\"input-3\"><label for=\"field-3\">K\u00f6k yaz\u0131 tipi boyutu<\/label><div class=\"term\">rem<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"kk_yaz_tipi_boyutu\" id=\"field-3\" aria-describedby=\"calc-unit-3 calc-info-3\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-3\">px<\/div><small id=\"calc-info-3\">&lt;html&gt; \u00f6\u011fesinin yaz\u0131 tipi boyutu. Taray\u0131c\u0131lar\u0131n varsay\u0131lan\u0131 16px&#039;dir; rem i\u00e7in gereklidir.<\/small><\/div><div class=\"field has-term\" id=\"input-4\"><label for=\"field-4\">\u00dcst \u00f6\u011fe yaz\u0131 tipi boyutu<\/label><div class=\"term\">em<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"st_e_yaz_tipi_boyutu\" id=\"field-4\" aria-describedby=\"calc-unit-4 calc-info-4\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 16\" min=\"0.1\" value=\"16\"\/><div class=\"unit\" id=\"calc-unit-4\">px<\/div><small id=\"calc-info-4\">\u00dcst \u00f6\u011fenin hesaplanan yaz\u0131 tipi boyutu; em ve % i\u00e7in gereklidir.<\/small><\/div><div class=\"field has-term\" id=\"input-5\"><label for=\"field-5\">G\u00f6r\u00fcnt\u00fc alan\u0131 geni\u015fli\u011fi<\/label><div class=\"term\">vw<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"grnt_alan_genilii\" id=\"field-5\" aria-describedby=\"calc-unit-5 calc-info-5\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1920\" min=\"1\" value=\"1920\"\/><div class=\"unit\" id=\"calc-unit-5\">px<\/div><small id=\"calc-info-5\">Taray\u0131c\u0131 g\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n geni\u015fli\u011fi; vw i\u00e7in gereklidir.<\/small><\/div><div class=\"field has-term\" id=\"input-6\"><label for=\"field-6\">G\u00f6r\u00fcnt\u00fc alan\u0131 y\u00fcksekli\u011fi<\/label><div class=\"term\">vh<\/div>  <div class=\"absolute bottom-0 left-16 top-8 w-2 h-0.5 bg-blue-500\"><\/div><input type=\"text\" name=\"grnt_alan_ykseklii\" id=\"field-6\" aria-describedby=\"calc-unit-6 calc-info-6\" data-number inputmode=\"decimal\" autocomplete=\"off\" spellcheck=\"false\" placeholder=\"e.g. 1080\" min=\"1\" value=\"1080\"\/><div class=\"unit\" id=\"calc-unit-6\">px<\/div><small id=\"calc-info-6\">Taray\u0131c\u0131 g\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n y\u00fcksekli\u011fi; vh i\u00e7in gereklidir.<\/small><\/div><\/fieldset><div class=\"buttons\"><button type=\"submit\" data-text=\"Yeniden hesapla\" id=\"calculate-button\" data-post=\"3955\">Hesapla<\/button><button type=\"reset\">S\u0131f\u0131rla<\/button><\/div><div class=\"field is-checkbox hidden!\" id=\"field-auto-calc\"><input type=\"checkbox\" id=\"auto-calc\"><label for=\"auto-calc\">Otomatik hesapla<\/label><small>Etkinle\u015ftirilirse, herhangi bir de\u011feri de\u011fi\u015ftirdi\u011finizde sonu\u00e7 otomatik olarak g\u00fcncellenir.<\/small><\/div><div class=\"fieldset-result is-hidden\" aria-labelledby=\"result-title\" aria-live=\"polite\" role=\"region\"> <h3 class=\"result-title bg-gradient-to-r from-primary-50 to-gray-50 dark:from-primary-900 dark:to-gray-800\" id=\"result-title\"><span class=\"icon icon-s-pulse\" aria-hidden=\"true\"><\/span> D\u00f6n\u00fc\u015ft\u00fcr\u00fclen de\u011ferler<\/h3><div class=\"result-box\"><div class=\"field-result\" id=\"output-1\"><span class=\"field-title\"><span>Piksel<\/span><span class=\"result-term\">px<\/span><\/span><span class=\"field-value\" id=\"result-1\" data-unit=\"px\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Sonucu kopyala\" aria-label=\"Sonucu kopyala\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-2\"><span class=\"field-title\"><span>K\u00f6k em<\/span><span class=\"result-term\">rem<\/span><\/span><span class=\"field-value\" id=\"result-2\" data-unit=\"rem\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Sonucu kopyala\" aria-label=\"Sonucu kopyala\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-3\"><span class=\"field-title\"><span>Em (\u00fcst \u00f6\u011fe)<\/span><span class=\"result-term\">em<\/span><\/span><span class=\"field-value\" id=\"result-3\" data-unit=\"em\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Sonucu kopyala\" aria-label=\"Sonucu kopyala\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-4\"><span class=\"field-title\"><span>G\u00f6r\u00fcnt\u00fc alan\u0131 geni\u015flik birimleri<\/span><span class=\"result-term\">vw<\/span><\/span><span class=\"field-value\" id=\"result-4\" data-unit=\"vw\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Sonucu kopyala\" aria-label=\"Sonucu kopyala\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-5\"><span class=\"field-title\"><span>G\u00f6r\u00fcnt\u00fc alan\u0131 y\u00fckseklik birimleri<\/span><span class=\"result-term\">vh<\/span><\/span><span class=\"field-value\" id=\"result-5\" data-unit=\"vh\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Sonucu kopyala\" aria-label=\"Sonucu kopyala\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result\" id=\"output-6\"><span class=\"field-title\"><span>Punto<\/span><span class=\"result-term\">pt<\/span><\/span><span class=\"field-value\" id=\"result-6\" data-unit=\"pt\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Sonucu kopyala\" aria-label=\"Sonucu kopyala\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><div class=\"field-result is-column\" id=\"output-7\"><span class=\"field-title\"><span>D\u00f6n\u00fc\u015f\u00fcm temeli<\/span><\/span><span class=\"field-value\" id=\"result-7\"><\/span><button type=\"button\" class=\"copy-result\" data-tooltip=\"Sonucu kopyala\" aria-label=\"Sonucu kopyala\"><span class=\"copy-icon icon icon-document-copy\" aria-hidden=\"true\"><\/span><\/button><\/div><\/div><div class=\"result-actions\"><button type=\"button\" class=\"copy-link\"><svg viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z\"\/><path d=\"M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z\"\/><\/svg><span class=\"copy-link__text\">Bu hesaplaman\u0131n ba\u011flant\u0131s\u0131n\u0131 kopyala<\/span><\/button><span class=\"sr-only\" role=\"status\" id=\"copy-link-status\"><\/span><\/div><\/div><a href=\"#respond\" class=\"hidden transition-opacity duration-300 opacity-0 w-50 text-sm justify-center items-center gap-2 px-4 py-2 rounded bg-gray-200 text-gray-700 hover:bg-gray-300\" id=\"leave-comment\"><span class=\"icon icon-comments\" aria-hidden=\"true\"><\/span>Yorum b\u0131rak<\/a><\/form><\/section><section id=\"calc-reactions\" class=\"not-prose hidden my-12 bg-gradient-to-r from-primary-50 to-gray-50 border border-indigo-100 rounded-xl px-6 py-4 shadow-sm\" data-post=\"3955\" aria-live=\"polite\" aria-labelledby=\"calc-reactions-title\"><p id=\"calc-reactions-title\" class=\"text-sm text-gray-500 text-center mb-2\">Bu sonu\u00e7 hakk\u0131nda ne d\u00fc\u015f\u00fcn\u00fcyorsunuz?<\/p><div role=\"group\" aria-labelledby=\"calc-reactions-title\" class=\"grid grid-cols-3 sm:flex sm:flex-row sm:justify-around gap-4 sm:items-center sm:flex-wrap\"><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"like\"><span class=\"reaction-count\" data-reaction-count=\"like\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude00 <\/span><span class=\"reaction-description font-medium\">Be\u011fendim <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"helpful\"><span class=\"reaction-count\" data-reaction-count=\"helpful\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\udca1 <\/span><span class=\"reaction-description font-medium\">Faydal\u0131 <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"confused\"><span class=\"reaction-count\" data-reaction-count=\"confused\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude15 <\/span><span class=\"reaction-description font-medium\">Kafam kar\u0131\u015ft\u0131 <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"disappointed\"><span class=\"reaction-count\" data-reaction-count=\"disappointed\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\ud83d\ude1e <\/span><span class=\"reaction-description font-medium\">Hayal k\u0131r\u0131kl\u0131\u011f\u0131 <\/span><\/button><button type=\"button\" aria-pressed=\"false\" class=\"reaction-btn flex flex-col items-center gap-1 text-sm text-gray-700 hover:text-primary-600 cursor-pointer transition-transform hover:scale-105\" data-reaction=\"inaccurate\"><span class=\"reaction-count\" data-reaction-count=\"inaccurate\">0<\/span><span class=\"reaction text-3xl\" aria-hidden=\"true\">\u274c <\/span><span class=\"reaction-description font-medium\">Hatal\u0131 <\/span><\/button><\/div><div id=\"reaction-message\" class=\"hidden mt-8 rounded-md border border-primary-100 bg-white\/50 backdrop-blur-sm px-4 py-2 text-sm text-center shadow-sm\"><\/div><\/section><div class=\"calcdash-ad not-prose calcdash-ad--calc_result calcdash-ad--in-article\"><ins class=\"adsbygoogle\" style=\"display:block\" data-ad-client=\"ca-pub-1721569815777345\" data-ad-slot=\"6317458308\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\"><\/ins><script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script><\/div>\n<style id=\"wpcoderpro-inline-1\">.formula-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section class=\"formula-box\" aria-labelledby=\"formula-title\">\r\n\t<div id=\"formula-title\" class=\"not-prose font-display mb-4\"><span class=\"icon icon-formula\" aria-hidden=\"true\"><\/span><h2>CSS Birimleri Form\u00fcl\u00fc<\/h2><\/div>\r\n\t<figure class=\"not-prose formula\">\r\n\t\t<figcaption class=\"formula-title\">Form\u00fcl<\/figcaption>\r\n\t\t<div class=\"text-base text-gray-800\" id=\"formula\">\n\\[ px = v \\times f(\\text{birim}) \\]\n\\[ x_{\\text{hedef}} = \\frac{px}{f(\\text{hedef birim})} \\]\n<\/div>\r\n\t<\/figure>\r\n\t<\/p>\n<p><strong>Burada:<\/strong><\/p>\n<ul>\n<li>\\(v\\) \u2014 girdi\u011finiz uzunluk, kendi birimi cinsinden<\/li>\n<li>\\(f(\\text{birim})\\) \u2014 o t\u00fcrden bir birimin ka\u00e7 piksele denk geldi\u011fi:<\/li>\n<li>\\(px\\): 1 &nbsp;\\(rem\\): k\u00f6k yaz\u0131 tipi boyutu &nbsp;\\(em\\): \u00fcst \u00f6\u011fenin yaz\u0131 tipi boyutu &nbsp;\\(vw\\): g\u00f6r\u00fcn\u00fcm alan\u0131 geni\u015fli\u011fi \\(\/ 100\\) &nbsp;\\(vh\\): g\u00f6r\u00fcn\u00fcm alan\u0131 y\u00fcksekli\u011fi \\(\/ 100\\) &nbsp;\\(pt\\): \\(96\/72 = 1.3333\\) &nbsp;\\(%\\): \u00fcst \u00f6\u011fenin yaz\u0131 tipi boyutu \\(\/ 100\\)<\/li>\n<\/ul>\n<p>Hesaplay\u0131c\u0131 \u00f6nce girilen de\u011feri piksele \u00e7evirir, sonra her hedef birimin piksel \u00e7arpan\u0131na b\u00f6ler. Bu iki ad\u0131ml\u0131 y\u00f6ntem, yedi sonucun da birbiriyle tutarl\u0131 olmas\u0131n\u0131 sa\u011flar.<\/p>\n<p>\r\n<\/section>\n<style id=\"wpcoderpro-inline-2\">.calculation-box {\r\n\tborder-bottom: none !important;\r\n}<\/style><section id=\"calculation\" class=\"calculation-box\" aria-labelledby=\"calculation-title\">\r\n\t<div id=\"calculation-title\" class=\"not-prose font-display\"><span class=\"icon icon-unordered-list\" aria-hidden=\"true\"><\/span><h2>CSS Birimleri \u2013 Hesaplama \u00d6rne\u011fi<\/h2><\/div>\r\n\r\n<\/p>\n<p><strong>\u00d6rnek:<\/strong> <code>24px<\/code> de\u011ferini rem, em, vw, vh ve pt birimlerine d\u00f6n\u00fc\u015ft\u00fcrelim; k\u00f6k ve \u00fcst \u00f6\u011fe yaz\u0131 tipi boyutu 16px, g\u00f6r\u00fcn\u00fcm alan\u0131 ise 1920\u00d71080 (hesaplay\u0131c\u0131n\u0131n varsay\u0131lanlar\u0131).<\/p>\n<p>\\[ px = 24 \\times 1 = 24 \\]<\/p>\n<p>\\[ rem = \\frac{24}{16} = 1.5 \\quad em = \\frac{24}{16} = 1.5 \\]<\/p>\n<p>\\[ vw = \\frac{24}{1920\/100} = \\frac{24}{19.2} = 1.25 \\quad vh = \\frac{24}{1080\/100} \\approx 2.2222 \\]<\/p>\n<p>\\[ pt = 24 \\times \\frac{72}{96} = 18 \\]<\/p>\n<p><strong>Sonu\u00e7:<\/strong> 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.<\/p>\n<p>\n\r\n<\/section>\n<h2>CSS Birim D\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc nas\u0131l kullan\u0131l\u0131r?<\/h2>\n<ol>\n<li><strong>De\u011fer<\/strong> alan\u0131na uzunlu\u011fu girin \u2014 \u00f6rne\u011fin 24. Negatif de\u011ferler de \u00e7al\u0131\u015f\u0131r; negatif margin de\u011ferleri i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/li>\n<li><strong>CSS Birimi<\/strong> a\u00e7\u0131l\u0131r listesinden bu de\u011ferin birimini se\u00e7in (px, rem, em, vw, vh, pt veya %).<\/li>\n<li><strong>K\u00f6k Yaz\u0131 Tipi Boyutunu<\/strong> ayarlay\u0131n \u2014 <code>&lt;html&gt;<\/code> \u00f6\u011fesinin yaz\u0131 tipi boyutu. Taray\u0131c\u0131lar varsay\u0131lan olarak 16px kullan\u0131r.<\/li>\n<li><strong>\u00dcst \u00d6\u011fe Yaz\u0131 Tipi Boyutunu<\/strong> ayarlay\u0131n \u2014 \u00fcst \u00f6\u011fenin hesaplanan yaz\u0131 tipi boyutu; em ve % d\u00f6n\u00fc\u015f\u00fcmleri i\u00e7in gerekir.<\/li>\n<li>Taray\u0131c\u0131 penceresinin <strong>G\u00f6r\u00fcn\u00fcm Alan\u0131 Geni\u015fli\u011fini<\/strong> ve <strong>G\u00f6r\u00fcn\u00fcm Alan\u0131 Y\u00fcksekli\u011fini<\/strong> piksel cinsinden girin; vw ve vh sonu\u00e7lar\u0131 bu de\u011ferlere ba\u011fl\u0131d\u0131r.<\/li>\n<li><strong>D\u00f6n\u00fc\u015ft\u00fcr\u00fclen De\u011ferler<\/strong> alt\u0131nda t\u00fcm kar\u015f\u0131l\u0131klar\u0131 tek seferde g\u00f6r\u00fcn; ayr\u0131ca sizin ayar\u0131n\u0131zda her birimin ka\u00e7 piksele denk geldi\u011fini g\u00f6steren d\u00f6n\u00fc\u015f\u00fcm taban\u0131 da yer al\u0131r.<\/li>\n<\/ol>\n<h2>CSS birimleri nedir ve neden \u00f6nemlidir?<\/h2>\n<p>CSS uzunluklar\u0131 iki aileye ayr\u0131l\u0131r. px ve pt gibi <em>mutlak<\/em> birimlerin sabit bir boyutu vard\u0131r: CSS spesifikasyonu referans pikseli, 1in = 96px = 72pt olacak \u015fekilde tan\u0131mlar. <em>G\u00f6reli<\/em> birimler ise ba\u011flama ba\u011fl\u0131d\u0131r: rem k\u00f6k \u00f6\u011fenin yaz\u0131 tipi boyutuna, em \u00fcst \u00f6\u011fenin yaz\u0131 tipi boyutuna, vw ve vh g\u00f6r\u00fcn\u00fcm alan\u0131n\u0131n geni\u015fli\u011finin ya da y\u00fcksekli\u011finin %1'ine, % (font-size i\u00e7in) \u00fcst \u00f6\u011fenin yaz\u0131 tipi boyutuna g\u00f6nderme yapar.<\/p>\n<p>Birim se\u00e7imi, d\u00fczenin nas\u0131l davranaca\u011f\u0131n\u0131 belirler. px cinsinden de\u011ferler kullan\u0131c\u0131 tercihlerinden ba\u011f\u0131ms\u0131z olarak sabit kal\u0131r; bu onlar\u0131 kenarl\u0131klar ve ince ayr\u0131nt\u0131lar i\u00e7in \u00f6ng\u00f6r\u00fclebilir, tipografi i\u00e7in ise kat\u0131 k\u0131lar. rem cinsinden de\u011ferler k\u00f6k yaz\u0131 tipi boyutuyla \u00f6l\u00e7eklenir; kullan\u0131c\u0131 taray\u0131c\u0131n\u0131n temel metnini b\u00fcy\u00fct\u00fcrse rem ile boyutland\u0131r\u0131lm\u0131\u015f her \u015fey orant\u0131l\u0131 olarak b\u00fcy\u00fcr \u2014 bu, eri\u015filebilirlik a\u00e7\u0131s\u0131ndan \u00f6nemli bir gerekliliktir. em ise i\u00e7 i\u00e7e ge\u00e7mi\u015f \u00f6\u011felerde katlanarak birikir ve derin i\u015faretlemede \u015fa\u015f\u0131rt\u0131c\u0131 sonu\u00e7lar do\u011furabilir.<\/p>\n<p>G\u00f6r\u00fcn\u00fcm alan\u0131 birimleri tipografiyi ve bo\u015fluklar\u0131 pencere boyutuna duyarl\u0131 hale getirir. <code>50vw<\/code> olarak ayarlanan bir geni\u015flik her zaman ekran\u0131n yar\u0131s\u0131n\u0131 doldurur; bu y\u00fczden hero b\u00f6l\u00fcmleri ve ak\u0131\u015fkan tipografi s\u0131k s\u0131k vw ile rem'i <code>clamp()<\/code> i\u00e7inde birle\u015ftirir. vw ve vh her yeniden boyutland\u0131rmada de\u011fi\u015fti\u011finden, bunlar\u0131 piksele d\u00f6n\u00fc\u015ft\u00fcrmek yaln\u0131zca tek bir g\u00f6r\u00fcn\u00fcm alan\u0131 boyutu i\u00e7in anlaml\u0131d\u0131r \u2014 hesaplay\u0131c\u0131ya girdi\u011finiz boyut.<\/p>\n<p>Sonu\u00e7lar\u0131 yorumlamak kolayd\u0131r: her sonu\u00e7, ayn\u0131 fiziksel uzunlu\u011fun ba\u015fka bir birimle ifade edilmi\u015f h\u00e2lidir. Bir tasar\u0131m sistemini px'ten rem'e ta\u015f\u0131yorsan\u0131z rem sat\u0131r\u0131, yazman\u0131z gereken token de\u011ferini verir; puan (point) kullanan tasar\u0131m ara\u00e7lar\u0131yla kar\u015f\u0131la\u015ft\u0131r\u0131yorsan\u0131z veya bask\u0131 i\u015fi yap\u0131yorsan\u0131z pt sat\u0131r\u0131 do\u011frudan kar\u015f\u0131l\u0131\u011f\u0131 g\u00f6sterir.<\/p>\n<h2>Varsay\u0131mlar, s\u0131n\u0131rlamalar ve pratik ipu\u00e7lar\u0131<\/h2>\n<ul>\n<li>D\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc standart CSS referans pikselini varsayar: <code>1in = 96px = 72pt<\/code>. Fiziksel (bask\u0131) \u00e7\u0131kt\u0131, cihaza g\u00f6re hafif farkl\u0131l\u0131k g\u00f6sterebilir.<\/li>\n<li>Y\u00fczde, \u00fcst \u00f6\u011fenin yaz\u0131 tipi boyutuna g\u00f6re kabul edilir; <code>font-size<\/code> i\u00e7in bu do\u011frudur. <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> ve <code>padding<\/code> i\u00e7in y\u00fczde ise \u00fcst \u00f6\u011fenin boyutlar\u0131n\u0131 temel al\u0131r; bu durumlarda farkl\u0131 bir referans de\u011feri gerekir.<\/li>\n<li>em, <em>\u00fcst \u00f6\u011fenin<\/em> yaz\u0131 tipi boyutuna g\u00f6redir. <code>line-height<\/code> veya <code>padding<\/code> gibi \u00f6\u011fenin kendi \u00f6zellikleri i\u00e7inde kullan\u0131ld\u0131\u011f\u0131nda em, o \u00f6\u011fenin kendi yaz\u0131 tipi boyutunu temel al\u0131r \u2014 \u00dcst \u00d6\u011fe Yaz\u0131 Tipi Boyutu alan\u0131n\u0131 buna g\u00f6re ayarlay\u0131n.<\/li>\n<li>vw ve vh sonu\u00e7lar\u0131 yaln\u0131zca girdi\u011finiz g\u00f6r\u00fcn\u00fcm alan\u0131 \u00f6l\u00e7\u00fcleri i\u00e7in ge\u00e7erlidir. D\u00f6n\u00fc\u015ft\u00fcr\u00fclen de\u011ferlerin nas\u0131l de\u011fi\u015fti\u011fini g\u00f6rmek i\u00e7in birka\u00e7 boyutu deneyin (\u00f6r. 1920\u00d71080, 1366\u00d7768, 390\u00d7844).<\/li>\n<li>Taray\u0131c\u0131lar baz\u0131 yap\u0131land\u0131rmalarda asgari yaz\u0131 tipi boyutu uygular; bu, \u00e7ok k\u00fc\u00e7\u00fck rem veya em tabanl\u0131 metnin hesab\u0131n \u00f6ng\u00f6rd\u00fc\u011f\u00fcnden b\u00fcy\u00fck g\u00f6r\u00fcnt\u00fclenmesine yol a\u00e7abilir.<\/li>\n<li>Pratik bir kural: varsay\u0131lan 16px k\u00f6k yaz\u0131 tipi boyutunda 1rem = 16px'dir, yani <em>px \u00f7 16 = rem<\/em>. K\u00f6k\u00fc 10px yaparsan\u0131z rem de\u011ferleri px \u00f7 10 ile birebir e\u015fle\u015fir; bir\u00e7ok tasar\u0131m sisteminin 10px k\u00f6k kullanmas\u0131n\u0131n nedeni budur.<\/li>\n<\/ul>\n<p>\u00d6l\u00e7\u00fc veya m\u00fchendislik birimleri aras\u0131nda da d\u00f6n\u00fc\u015f\u00fcm yapman\u0131z gerekiyorsa <a href=\"https:\/\/wpcalc.com\/en\/converters\/power-unit-converter\/\">G\u00fc\u00e7 Birimi D\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc<\/a>, <a href=\"https:\/\/wpcalc.com\/tr\/birim-ceviriciler\/veri-aktarim-hizi-donusturucu-mbps-mb-s\/\">Veri Aktar\u0131m H\u0131z\u0131 D\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc<\/a> veya genel <a href=\"https:\/\/wpcalc.com\/tr\/birim-ceviriciler\/hiz-birim-donusturucu\/\">H\u0131z Birimleri D\u00f6n\u00fc\u015ft\u00fcr\u00fcc\u00fc<\/a> ara\u00e7lar\u0131m\u0131z\u0131 deneyin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bir CSS uzunlu\u011funu px, rem, em, vw, vh, pt ve y\u00fczde aras\u0131nda d\u00f6n\u00fc\u015ft\u00fcr\u00fcn. De\u011feri girin, birimini se\u00e7in, k\u00f6k ve \u00fcst \u00f6\u011fe yaz\u0131 tipi boyutlar\u0131 ile g\u00f6r\u00fcn\u00fcm alan\u0131 \u00f6l\u00e7\u00fclerini ayarlay\u0131n; t\u00fcm kar\u015f\u0131l\u0131klar\u0131 tek seferde al\u0131n.<\/p>\n","protected":false},"author":3168,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[58],"class_list":["post-3955","post","type-post","status-publish","format-standard","hentry","category-birim-ceviriciler","tag-diger-birimler"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/posts\/3955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/users\/3168"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/comments?post=3955"}],"version-history":[{"count":0,"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/posts\/3955\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/media?parent=3955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/categories?post=3955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcalc.com\/tr\/wp-json\/wp\/v2\/tags?post=3955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}