{"id":30676,"date":"2025-09-30T16:41:28","date_gmt":"2025-09-30T13:41:28","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=30676"},"modified":"2025-09-30T16:41:28","modified_gmt":"2025-09-30T13:41:28","slug":"css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/","title":{"rendered":"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber"},"content":{"rendered":"

<\/p>\n

CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber<\/h2>\n

Giri\u015f: Medya Sorgular\u0131 Nedir ve Neden \u00d6nemlidir?<\/h3>\n

G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, web sitelerine ak\u0131ll\u0131 telefonlardan tablet bilgisayarlara, masa\u00fcst\u00fc monit\u00f6rlerden ak\u0131ll\u0131 televizyonlara kadar \u00e7ok \u00e7e\u015fitli cihazlar \u00fczerinden eri\u015fmektedir. Bu cihazlar\u0131n her birinin ekran boyutlar\u0131, \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri, y\u00f6nlendirmeleri ve hatta kullan\u0131c\u0131 tercihleri (\u00f6rne\u011fin, koyu mod) farkl\u0131l\u0131k g\u00f6sterir. Bir web sitesinin t\u00fcm bu farkl\u0131 ko\u015fullara uyum sa\u011flayarak her cihazda optimum bir kullan\u0131c\u0131 deneyimi sunmas\u0131, modern web tasar\u0131m\u0131n\u0131n temel gereksinimlerinden biridir. \u0130\u015fte bu noktada CSS Medya Sorgular\u0131 (Media Queries) devreye girer.<\/p>\n

Medya sorgular\u0131, CSS’in g\u00fc\u00e7l\u00fc bir \u00f6zelli\u011fidir ve web geli\u015ftiricilerin, belirli cihaz \u00f6zelliklerine veya ortam ko\u015fullar\u0131na g\u00f6re farkl\u0131 stil kurallar\u0131 uygulamas\u0131na olanak tan\u0131r. \u00d6rne\u011fin, bir web sitesinin mobil cihazlarda farkl\u0131 bir d\u00fczen, daha b\u00fcy\u00fck yaz\u0131 tipleri veya gizlenmi\u015f men\u00fcler g\u00f6stermesini sa\u011flayabiliriz. Masa\u00fcst\u00fc ekranlarda ise daha geni\u015f bir d\u00fczen, birden fazla s\u00fctun ve tam boyutlu gezinme \u00e7ubuklar\u0131 g\u00f6r\u00fcnt\u00fclenebilir. Bu dinamik uyum yetene\u011fi, web sitelerinin “duyarl\u0131 (responsive)” olmas\u0131n\u0131 sa\u011flar ve kullan\u0131c\u0131lar\u0131n cihazlar\u0131ndan ba\u011f\u0131ms\u0131z olarak tutarl\u0131, eri\u015filebilir ve estetik bir deneyim ya\u015famas\u0131n\u0131 garanti eder. Medya sorgular\u0131 olmasayd\u0131, her cihaz t\u00fcr\u00fc i\u00e7in ayr\u0131 bir web sitesi geli\u015ftirmek veya t\u00fcm cihazlarda k\u00f6t\u00fc g\u00f6r\u00fcnen tek bir statik tasar\u0131m kullanmak zorunda kal\u0131rd\u0131k ki bu da hem geli\u015ftirme maliyetlerini art\u0131r\u0131r hem de kullan\u0131c\u0131 memnuniyetini d\u00fc\u015f\u00fcr\u00fcrd\u00fc.<\/p>\n

Medya Sorgular\u0131n\u0131n Temel Yap\u0131s\u0131<\/h3>\n

Medya sorgular\u0131, CSS i\u00e7inde @media<\/code> kural\u0131 kullan\u0131larak tan\u0131mlan\u0131r. Bu kural, bir veya daha fazla medya \u00f6zelli\u011finin belirli bir ko\u015fulu kar\u015f\u0131lay\u0131p kar\u015f\u0131lamad\u0131\u011f\u0131na bakar ve ko\u015ful do\u011fruysa i\u00e7erisindeki CSS kurallar\u0131n\u0131 uygular.<\/p>\n

@media<\/code> Kural\u0131<\/h4>\n

@media<\/code> kural\u0131, medya sorgusunun ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r. Temel yap\u0131s\u0131 \u015fu \u015fekildedir:<\/p>\n

\n@media medya_t\u00fcr\u00fc and (medya_\u00f6zelli\u011fi: de\u011fer) {\n  \/ Medya sorgusu ko\u015fulu kar\u015f\u0131land\u0131\u011f\u0131nda uygulanacak CSS kurallar\u0131 <\/em>\/\n}\n<\/code><\/pre>\n
\u00d6rne\u011fin, ekran geni\u015fli\u011fi 768 pikselden k\u00fc\u00e7\u00fck oldu\u011funda bir stil uygulamak i\u00e7in:<\/p>\n
\n@media screen and (max-width: 768px) {\n  body {\n    background-color: lightblue;\n  }\n  .menu {\n    flex-direction: column;\n  }\n}\n<\/code><\/pre>\n
Medya T\u00fcrleri (Media Types)<\/h4>\n
Medya t\u00fcrleri, stilin uygulanaca\u011f\u0131 genel cihaz kategorisini belirtir. En s\u0131k kullan\u0131lan medya t\u00fcrleri \u015funlard\u0131r:<\/p>\n
*   all<\/code><\/strong>: T\u00fcm medya t\u00fcrleri i\u00e7in ge\u00e7erlidir. Varsay\u0131lan de\u011ferdir ve genellikle a\u00e7\u0131k\u00e7a belirtilmez.
\n*   screen<\/code><\/strong>: Renkli bilgisayar ekranlar\u0131, tabletler ve ak\u0131ll\u0131 telefonlar gibi cihazlar i\u00e7in. Web siteleri i\u00e7in en s\u0131k kullan\u0131lan t\u00fcrd\u00fcr.
\n*   print<\/code><\/strong>: Yaz\u0131c\u0131lar i\u00e7in. Web sayfas\u0131n\u0131n yazd\u0131r\u0131ld\u0131\u011f\u0131nda nas\u0131l g\u00f6r\u00fcnece\u011fini belirlemek i\u00e7in kullan\u0131l\u0131r.
\n*   speech<\/code><\/strong>: Ekran okuyucular gibi konu\u015fma sentezleyicileri i\u00e7in. Nadiren kullan\u0131l\u0131r.<\/p>\n
\u00d6rnek:<\/p>\n
\n@media print {\n  body {\n    font-size: 12pt;\n    color: black;\n  }\n  nav, footer {\n    display: none; \/ Navigasyon ve altbilgiyi yazd\u0131rma \u00e7\u0131kt\u0131s\u0131ndan gizle <\/em>\/\n  }\n}\n<\/code><\/pre>\n
Medya \u00d6zellikleri (Media Features)<\/h4>\n
Medya \u00f6zellikleri, belirli bir cihaz\u0131n veya ortam\u0131n \u00f6zelliklerini sorgulamak i\u00e7in kullan\u0131l\u0131r. Her \u00f6zelli\u011fin bir ad\u0131 ve bir de\u011feri vard\u0131r. Baz\u0131 \u00f6zellikler min-<\/code> veya max-<\/code> \u00f6nekleriyle kullan\u0131larak bir aral\u0131k belirtilebilir.<\/p>\n
\u00d6rnekler: width<\/code>, height<\/code>, orientation<\/code>, resolution<\/code>, color-scheme<\/code>.<\/p>\n
Mant\u0131ksal Operat\u00f6rler (Logical Operators)<\/h4>\n
Medya sorgular\u0131nda birden fazla ko\u015fulu birle\u015ftirmek i\u00e7in mant\u0131ksal operat\u00f6rler kullan\u0131l\u0131r:<\/p>\n
*   and<\/code><\/strong>: \u0130ki veya daha fazla ko\u015fulun ayn\u0131 anda do\u011fru olmas\u0131n\u0131 gerektirir.<\/p>\n
\n    @media screen and (min-width: 768px) and (max-width: 1024px) {\n      \/ Geni\u015flik 768px ile 1024px aras\u0131nda oldu\u011funda <\/em>\/\n    }\n    <\/code><\/pre>\n
*   or<\/code> (virg\u00fcl ,<\/code>)<\/strong>: Ko\u015fullardan herhangi birinin do\u011fru olmas\u0131n\u0131 gerektirir.<\/p>\n
\n    @media screen and (max-width: 600px), screen and (orientation: landscape) {\n      \/ Geni\u015flik 600px'ten k\u00fc\u00e7\u00fckse VEYA cihaz yatay konumdaysa <\/em>\/\n    }\n    <\/code><\/pre>\n
*   not<\/code><\/strong>: Bir ko\u015fulun yanl\u0131\u015f olmas\u0131n\u0131 gerektirir. Genellikle belirli bir medya t\u00fcr\u00fcn\u00fc hari\u00e7 tutmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\n    @media not screen and (color) {\n      \/ Renkli ekran olmayan t\u00fcm cihazlar i\u00e7in (\u00f6rn. e-okuyucular) <\/em>\/\n    }\n    <\/code><\/pre>\n
*   only<\/code><\/strong>: Eski taray\u0131c\u0131lar\u0131n medya sorgusunu yanl\u0131\u015fl\u0131kla uygulamas\u0131n\u0131 engellemek i\u00e7in kullan\u0131l\u0131r. Modern taray\u0131c\u0131lar i\u00e7in genellikle gereksizdir.<\/p>\n
\n    @media only screen and (min-width: 992px) {\n      \/ Sadece ekran medya t\u00fcr\u00fc ve geni\u015flik 992px'ten b\u00fcy\u00fckse <\/em>\/\n    }\n    <\/code><\/pre>\n
S\u0131k Kullan\u0131lan Medya \u00d6zellikleri ve Uygulamalar\u0131<\/h3>\n
Medya sorgular\u0131n\u0131n g\u00fcc\u00fc, sundu\u011fu zengin medya \u00f6zelliklerinden gelir. \u0130\u015fte en s\u0131k kullan\u0131lanlar ve kullan\u0131m alanlar\u0131:<\/p>\n
Geni\u015flik ve Y\u00fckseklik (Width & Height)<\/h4>\n
Bunlar, duyarl\u0131 tasar\u0131m\u0131n bel kemi\u011fidir. Ekran\u0131n veya g\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n (viewport) geni\u015fli\u011fini ve y\u00fcksekli\u011fini sorgular.<\/p>\n
*   width<\/code><\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n mevcut geni\u015fli\u011fi.
\n*   min-width<\/code><\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131 geni\u015fli\u011fi belirtilen de\u011ferden b\u00fcy\u00fck veya e\u015fitse. (Mobil-first yakla\u015f\u0131mda s\u0131k\u00e7a kullan\u0131l\u0131r.)<\/p>\n
\n    @media screen and (min-width: 768px) {\n      \/ Tablet ve \u00fczeri cihazlar i\u00e7in stiller <\/em>\/\n    }\n    <\/code><\/pre>\n
*   max-width<\/code><\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131 geni\u015fli\u011fi belirtilen de\u011ferden k\u00fc\u00e7\u00fck veya e\u015fitse. (Masa\u00fcst\u00fc-first yakla\u015f\u0131mda s\u0131k\u00e7a kullan\u0131l\u0131r.)<\/p>\n
\n    @media screen and (max-width: 767px) {\n      \/ Mobil cihazlar i\u00e7in stiller <\/em>\/\n    }\n    <\/code><\/pre>\n
*   height<\/code><\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n mevcut y\u00fcksekli\u011fi.
\n*   min-height<\/code><\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131 y\u00fcksekli\u011fi belirtilen de\u011ferden b\u00fcy\u00fck veya e\u015fitse.
\n*   max-height<\/code><\/strong>: G\u00f6r\u00fcnt\u00fc alan\u0131 y\u00fcksekli\u011fi belirtilen de\u011ferden k\u00fc\u00e7\u00fck veya e\u015fitse.<\/p>\n
Cihaz Geni\u015fli\u011fi ve Y\u00fcksekli\u011fi (Device Width & Height)<\/h4>\n
Bu \u00f6zellikler, cihaz\u0131n fiziksel ekran\u0131n\u0131n geni\u015fli\u011fini ve y\u00fcksekli\u011fini sorgular, g\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n (viewport) de\u011fil. Genellikle width<\/code> ve height<\/code> yerine device-width<\/code> ve device-height<\/code> kullanmak, \u00f6zellikle mobil cihazlarda, istenmeyen davran\u0131\u015flara yol a\u00e7abilir. width<\/code> ve height<\/code> genellikle daha g\u00fcvenli ve esnektir \u00e7\u00fcnk\u00fc kullan\u0131c\u0131 taray\u0131c\u0131y\u0131 yeniden boyutland\u0131rd\u0131\u011f\u0131nda da tepki verirler.<\/p>\n
*   min-device-width<\/code><\/strong>, max-device-width<\/code><\/strong>
\n*   min-device-height<\/code><\/strong>, max-device-height<\/code><\/strong><\/p>\n
\u00d6nemli Not:<\/strong> \u00c7o\u011fu durumda, width<\/code> ve height<\/code> \u00f6zelliklerini kullanmak, device-width<\/code> ve device-height<\/code> \u00f6zelliklerine g\u00f6re daha iyi sonu\u00e7lar verir. device-width<\/code> ve device-height<\/code>, cihaz\u0131n fiziksel \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcne ba\u011fl\u0131d\u0131r ve kullan\u0131c\u0131 taray\u0131c\u0131 penceresini yeniden boyutland\u0131rd\u0131\u011f\u0131nda de\u011fi\u015fmezler. Bu durum, duyarl\u0131 tasar\u0131m\u0131n temel prensibi olan esnekli\u011fe ayk\u0131r\u0131d\u0131r.<\/p>\n
Y\u00f6nlendirme (Orientation)<\/h4>\n
Cihaz\u0131n yatay (landscape) veya dikey (portrait) konumda olup olmad\u0131\u011f\u0131n\u0131 sorgular.<\/p>\n
*   orientation: portrait<\/code><\/strong>: Cihaz dikey konumdaysa (y\u00fckseklik geni\u015flikten b\u00fcy\u00fckse).
\n*   orientation: landscape<\/code><\/strong>: Cihaz yatay konumdaysa (geni\u015flik y\u00fckseklikten b\u00fcy\u00fckse).<\/p>\n
\n@media screen and (orientation: landscape) {\n  body {\n    display: flex;\n  }\n}\n<\/code><\/pre>\n
\u00c7\u00f6z\u00fcn\u00fcrl\u00fck (Resolution)<\/h4>\n
Cihaz\u0131n piksel yo\u011funlu\u011funu (DPI veya DPPC) sorgular. \u00d6zellikle Retina ekranlar gibi y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ekranlar i\u00e7in farkl\u0131 g\u00f6rseller sunmak amac\u0131yla kullan\u0131l\u0131r.<\/p>\n
*   min-resolution<\/code><\/strong>, max-resolution<\/code><\/strong>: Minimum veya maksimum \u00e7\u00f6z\u00fcn\u00fcrl\u00fck. Birimi dpi<\/code> (dots per inch) veya dpcm<\/code> (dots per centimeter) olabilir.
\n*   resolution<\/code><\/strong>: Belirli bir \u00e7\u00f6z\u00fcn\u00fcrl\u00fck.<\/p>\n
\n@media screen and (min-resolution: 2dppx) { \/ 2 device pixels per CSS pixel <\/em>\/\n  .logo {\n    background-image: url('logo@2x.png'); \/ Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc logo <\/em>\/\n  }\n}\n<\/code><\/pre>\n
Renk (Color)<\/h4>\n
Cihaz\u0131n renk yeteneklerini sorgular.<\/p>\n
*   color<\/code><\/strong>: Cihaz\u0131n bit cinsinden renk bile\u015fenlerinin say\u0131s\u0131.
\n*   min-color<\/code><\/strong>, max-color<\/code><\/strong>: Minimum veya maksimum renk bit say\u0131s\u0131.
\n*   color-index<\/code><\/strong>: Cihaz\u0131n renk paletindeki giri\u015f say\u0131s\u0131. (Nadiren kullan\u0131l\u0131r.)
\n*   monochrome<\/code><\/strong>: Cihaz\u0131n tek renkli olup olmad\u0131\u011f\u0131n\u0131 sorgular. (Nadiren kullan\u0131l\u0131r.)<\/p>\n
Renk Gam\u0131 (Color Gamut)<\/h4>\n
Cihaz\u0131n destekledi\u011fi renk gam\u0131n\u0131 sorgular (\u00f6rne\u011fin, sRGB, P3). Daha geni\u015f renk gam\u0131na sahip ekranlar i\u00e7in \u00f6zel stiller uygulamak i\u00e7in kullan\u0131labilir.<\/p>\n
*   color-gamut: srgb<\/code><\/strong>: Standart sRGB renk gam\u0131n\u0131 destekler.
\n*   color-gamut: p3<\/code><\/strong>: Display P3 renk gam\u0131n\u0131 destekler (daha geni\u015f).
\n*   color-gamut: rec2020<\/code><\/strong>: Rec. 2020 renk gam\u0131n\u0131 destekler (en geni\u015f).<\/p>\n
\n@media (color-gamut: p3) {\n  .hero-image {\n    background-image: url('hero-p3.jpg'); \/ Geni\u015f gaml\u0131 g\u00f6rsel <\/em>\/\n  }\n}\n<\/code><\/pre>\n
Ekran Oran\u0131 (Aspect Ratio)<\/h4>\n
G\u00f6r\u00fcnt\u00fc alan\u0131n\u0131n geni\u015fli\u011finin y\u00fcksekli\u011fine oran\u0131n\u0131 sorgular.<\/p>\n
*   aspect-ratio<\/code><\/strong>: Belirli bir oran (\u00f6rn. 16\/9<\/code>).
\n*   min-aspect-ratio<\/code><\/strong>, max-aspect-ratio<\/code><\/strong>: Minimum veya maksimum oran.<\/p>\n
\n@media screen and (min-aspect-ratio: 16\/9) {\n  \/ Geni\u015f ekran monit\u00f6rler i\u00e7in stiller <\/em>\/\n}\n<\/code><\/pre>\n
Kullan\u0131c\u0131 Tercihleri (User Preferences) – Yeni ve \u00d6nemli!<\/h4>\n
Bu medya \u00f6zellikleri, kullan\u0131c\u0131lar\u0131n i\u015fletim sistemi veya taray\u0131c\u0131 ayarlar\u0131 arac\u0131l\u0131\u011f\u0131yla belirledi\u011fi tercihleri sorgular. Modern ve eri\u015filebilir web tasar\u0131m\u0131nda kritik \u00f6neme sahiptirler.<\/p>\n
*   prefers-color-scheme<\/code><\/strong>: Kullan\u0131c\u0131n\u0131n a\u00e7\u0131k veya koyu tema tercihini sorgular.
\n    *   light<\/code><\/strong>: A\u00e7\u0131k tema tercih edildi\u011finde.
\n    *   dark<\/code><\/strong>: Koyu tema tercih edildi\u011finde.<\/p>\n
\n    @media (prefers-color-scheme: dark) {\n      body {\n        background-color: #333;\n        color: #eee;\n      }\n      a {\n        color: #8ab4f8;\n      }\n    }\n    <\/code><\/pre>\n
*   prefers-reduced-motion<\/code><\/strong>: Kullan\u0131c\u0131n\u0131n azalt\u0131lm\u0131\u015f hareket (animasyon) tercihini sorgular. \u00d6zellikle duyarl\u0131 animasyonlar veya ge\u00e7i\u015fler i\u00e7eren siteler i\u00e7in eri\u015filebilirlik a\u00e7\u0131s\u0131ndan \u00f6nemlidir.
\n    *   no-preference<\/code><\/strong>: Kullan\u0131c\u0131n\u0131n bir tercihi yok veya azalt\u0131lm\u0131\u015f hareket istemiyor.
\n    *   reduce<\/code><\/strong>: Kullan\u0131c\u0131 azalt\u0131lm\u0131\u015f hareket tercih ediyor.<\/p>\n
\n    @media (prefers-reduced-motion: reduce) {\n      * {\n        transition: none !important;\n        animation: none !important;\n      }\n    }\n    <\/code><\/pre>\n
*   prefers-contrast<\/code><\/strong>: Kullan\u0131c\u0131n\u0131n y\u00fcksek veya d\u00fc\u015f\u00fck kontrast tercihini sorgular.
\n    *   no-preference<\/code><\/strong>: Kullan\u0131c\u0131n\u0131n bir tercihi yok.
\n    *   more<\/code><\/strong>: Daha y\u00fcksek kontrast tercih ediliyor.
\n    *   less<\/code><\/strong>: Daha d\u00fc\u015f\u00fck kontrast tercih ediliyor.
\n    *   custom<\/code><\/strong>: \u00d6zel bir kontrast ayar\u0131 var (\u015fu an i\u00e7in az destekleniyor).<\/p>\n
\n    @media (prefers-contrast: more) {\n      body {\n        background-color: black;\n        color: white;\n      }\n      button {\n        border: 2px solid white;\n      }\n    }\n    <\/code><\/pre>\n
Medya Sorgular\u0131n\u0131 Kullan\u0131m Stratejileri<\/h3>\n
Medya sorgular\u0131n\u0131 etkili bir \u015fekilde kullanmak i\u00e7in belirli stratejiler benimsemek \u00f6nemlidir.<\/p>\n
Mobil \u0130lk Yakla\u015f\u0131m (Mobile-First) vs. Masa\u00fcst\u00fc \u0130lk Yakla\u015f\u0131m (Desktop-First)<\/h4>\n
*   Mobil \u0130lk Yakla\u015f\u0131m<\/strong>: Bu strateji, tasar\u0131ma ve geli\u015ftirmeye en k\u00fc\u00e7\u00fck ekran boyutundan (mobil) ba\u015flar. Temel stiller mobil cihazlar i\u00e7in yaz\u0131l\u0131r ve daha sonra min-width<\/code> medya sorgular\u0131 kullan\u0131larak daha b\u00fcy\u00fck ekranlar i\u00e7in stiller eklenir. Bu yakla\u015f\u0131m, performans\u0131 ve kullan\u0131c\u0131 deneyimini optimize etmek i\u00e7in genellikle tercih edilir \u00e7\u00fcnk\u00fc mobil cihazlarda daha az kaynakla ba\u015flamak, daha sonra a\u015famal\u0131 olarak daha fazla karma\u015f\u0131kl\u0131k eklemek anlam\u0131na gelir.<\/p>\n
\n    \/ Mobil cihazlar i\u00e7in varsay\u0131lan stiller (breakpoint yok) <\/em>\/\n    body {\n      font-size: 16px;\n    }\n    .container {\n      width: 100%;\n      padding: 15px;\n    }\n\n    \/ Tabletler i\u00e7in (min-width: 768px) <\/em>\/\n    @media screen and (min-width: 768px) {\n      .container {\n        width: 750px;\n        margin: 0 auto;\n      }\n    }\n\n    \/ Masa\u00fcst\u00fc i\u00e7in (min-width: 1200px) <\/em>\/\n    @media screen and (min-width: 1200px) {\n      .container {\n        width: 1170px;\n      }\n    }\n    <\/code><\/pre>\n
*   Masa\u00fcst\u00fc \u0130lk Yakla\u015f\u0131m<\/strong>: Bu strateji, tasar\u0131ma masa\u00fcst\u00fc ekran boyutundan ba\u015flar ve daha sonra max-width<\/code> medya sorgular\u0131 kullan\u0131larak daha k\u00fc\u00e7\u00fck ekranlar i\u00e7in stiller ayarlan\u0131r. Bu yakla\u015f\u0131m, mobil ilk yakla\u015f\u0131ma g\u00f6re daha az tercih edilir \u00e7\u00fcnk\u00fc mobil cihazlar i\u00e7in gereksiz stilleri y\u00fckleyebilir ve daha sonra bunlar\u0131 ge\u00e7ersiz k\u0131lmak zorunda kalabilirsiniz.<\/p>\n
\n    \/ Masa\u00fcst\u00fc i\u00e7in varsay\u0131lan stiller <\/em>\/\n    body {\n      font-size: 18px;\n    }\n    .container {\n      width: 1170px;\n      margin: 0 auto;\n    }\n\n    \/ Tabletler i\u00e7in (max-width: 1199px) <\/em>\/\n    @media screen and (max-width: 1199px) {\n      .container {\n        width: 970px;\n      }\n    }\n\n    \/ Mobil cihazlar i\u00e7in (max-width: 767px) <\/em>\/\n    @media screen and (max-width: 767px) {\n      .container {\n        width: 100%;\n        padding: 15px;\n      }\n    }\n    <\/code><\/pre>\n
K\u0131r\u0131lma Noktalar\u0131 (Breakpoints) Belirleme<\/h4>\n
K\u0131r\u0131lma noktalar\u0131, tasar\u0131m\u0131n belirli bir ekran geni\u015fli\u011finde de\u011fi\u015fti\u011fi noktalard\u0131r. Bu noktalar, genellikle yayg\u0131n cihaz boyutlar\u0131na (telefon, tablet, k\u00fc\u00e7\u00fck masa\u00fcst\u00fc, b\u00fcy\u00fck masa\u00fcst\u00fc) g\u00f6re belirlenir, ancak en iyi uygulama, i\u00e7eri\u011fin kendisinin ne zaman bozuldu\u011funu veya daha iyi bir d\u00fczene ihtiya\u00e7 duydu\u011funu g\u00f6zlemleyerek dinamik olarak belirlenmesidir.
\nYayg\u0131n k\u0131r\u0131lma noktas\u0131 \u00f6rnekleri:
\n*   K\u00fc\u00e7\u00fck telefonlar: 320px<\/code>
\n*   Telefonlar: 480px<\/code> – 600px<\/code>
\n*   Tabletler: 768px<\/code> – `992px<\/code>
\n*   Masa\u00fcst\u00fc: 992px<\/code> – 1200px<\/code>
\n*   B\u00fcy\u00fck masa\u00fcst\u00fc: 1200px<\/code> \u00fczeri<\/p>\n
Kapsay\u0131c\u0131 Sorgular (Container Queries) – Gelecek ve Mevcut Durum<\/h4>\n
Geleneksel medya sorgular\u0131, t\u00fcm g\u00f6r\u00fcnt\u00fc alan\u0131na (viewport) g\u00f6re stil uygular. Ancak modern web tasar\u0131mlar\u0131nda, bir bile\u015fenin (\u00f6rne\u011fin, bir widget veya kart) kendi kapsay\u0131c\u0131s\u0131n\u0131n boyutuna g\u00f6re stil de\u011fi\u015ftirmesi daha mant\u0131kl\u0131 olabilir. \u0130\u015fte bu noktada Kapsay\u0131c\u0131 Sorgular (Container Queries) devreye girer.<\/p>\n
Kapsay\u0131c\u0131 sorgular\u0131, bir bile\u015fenin ebeveyn elementinin boyutuna g\u00f6re stil uygulamas\u0131na izin verir. Bu, daha mod\u00fcler ve yeniden kullan\u0131labilir bile\u015fenler olu\u015fturmay\u0131 sa\u011flar. \u00d6rne\u011fin, bir kart bile\u015feni, ana d\u00fczenin geni\u015fli\u011fine bak\u0131lmaks\u0131z\u0131n, kendi kapsay\u0131c\u0131s\u0131n\u0131n geni\u015fli\u011fine g\u00f6re dikeyden yatay d\u00fczene ge\u00e7ebilir.<\/p>\n
Kapsay\u0131c\u0131 sorgular\u0131, CSS’in yeni ve heyecan verici bir \u00f6zelli\u011fidir ve modern taray\u0131c\u0131larda desteklenmektedir. Kullan\u0131m\u0131, @container<\/code> kural\u0131 ile ger\u00e7ekle\u015fir:<\/p>\n
\n.card-container {\n  container-type: inline-size; \/ Kapsay\u0131c\u0131n\u0131n yatay boyuta g\u00f6re sorgulanaca\u011f\u0131n\u0131 belirtir <\/em>\/\n  container-name: card; \/ Kapsay\u0131c\u0131ya bir isim verir <\/em>\/\n}\n\n@container card (min-width: 400px) {\n  .card-title {\n    font-size: 1.5em;\n  }\n  .card-image {\n    float: left;\n    margin-right: 1em;\n  }\n}\n<\/code><\/pre>\n
Medya sorgular\u0131, genel sayfa d\u00fczeni i\u00e7in vazge\u00e7ilmezken, kapsay\u0131c\u0131 sorgular\u0131, sayfa i\u00e7indeki ba\u011f\u0131ms\u0131z bile\u015fenlerin duyarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flamak i\u00e7in idealdir. Bu iki \u00f6zellik birbirini tamamlar ve daha esnek ve g\u00fc\u00e7l\u00fc duyarl\u0131 tasar\u0131mlar olu\u015fturmaya olanak tan\u0131r.<\/p>\n
Medya Sorgular\u0131nda En \u0130yi Uygulamalar ve \u0130pu\u00e7lar\u0131<\/h3>\n
Meta Viewport Etiketi<\/h4>\n
Duyarl\u0131 web tasar\u0131m\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131 i\u00e7in her HTML sayfas\u0131n\u0131n <\/code> b\u00f6l\u00fcm\u00fcnde viewport<\/code> meta etiketini bulundurmak zorunludur:<\/p>\n
\n\n<\/code><\/pre>\n
Bu etiket, taray\u0131c\u0131ya sayfan\u0131n cihaz\u0131n ekran geni\u015fli\u011fine g\u00f6re \u00f6l\u00e7eklenmesi gerekti\u011fini ve ba\u015flang\u0131\u00e7 yak\u0131nla\u015ft\u0131rma seviyesinin 1.0 olmas\u0131 gerekti\u011fini bildirir. Bu olmadan, mobil taray\u0131c\u0131lar sayfay\u0131 varsay\u0131lan olarak masa\u00fcst\u00fc geni\u015fli\u011finde (genellikle 980px) i\u015fleyebilir ve ard\u0131ndan k\u00fc\u00e7\u00fcltebilir, bu da medya sorgular\u0131n\u0131n do\u011fru \u00e7al\u0131\u015fmas\u0131n\u0131 engeller.<\/p>\n
Performans Etkileri<\/h4>\n
\u00c7ok fazla medya sorgusu kullanmak veya karma\u015f\u0131k sorgular yazmak performans sorunlar\u0131na yol a\u00e7maz. Ancak, medya sorgular\u0131 i\u00e7inde b\u00fcy\u00fck dosyalar\u0131 (\u00f6rne\u011fin, y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rseller) ko\u015fullu olarak y\u00fcklerken dikkatli olmak gerekir. Gereksiz kaynaklar\u0131n y\u00fcklenmesini \u00f6nlemek i\u00e7in srcset<\/code> ve sizes<\/code> gibi HTML \u00f6zellikleri veya <\/code> etiketi ile duyarl\u0131 g\u00f6rseller kullanmak daha etkilidir.<\/p>\n
Test Etme ve Hata Ay\u0131klama<\/h4>\n
Medya sorgular\u0131n\u0131 test etmek i\u00e7in taray\u0131c\u0131lar\u0131n geli\u015ftirici ara\u00e7lar\u0131n\u0131 (\u00f6rne\u011fin, Chrome DevTools’un “Responsive Design Mode” veya Firefox “Responsive Design View”) kullanmak \u00e7ok \u00f6nemlidir. Bu ara\u00e7lar, farkl\u0131 ekran boyutlar\u0131n\u0131 ve cihazlar\u0131 sim\u00fcle etmenize olanak tan\u0131r, b\u00f6ylece tasar\u0131m\u0131n\u0131z\u0131n \u00e7e\u015fitli ko\u015fullarda nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc kolayca g\u00f6rebilirsiniz.<\/p>\n
Taray\u0131c\u0131 Uyumlulu\u011fu<\/h4>\n
Modern medya sorgular\u0131 (\u00f6zellikle prefers-color-scheme<\/code> gibi kullan\u0131c\u0131 tercihi sorgular\u0131) yeni taray\u0131c\u0131larda geni\u015f \u00e7apta desteklenirken, eski taray\u0131c\u0131lar baz\u0131 \u00f6zelliklere sahip olmayabilir. Bu nedenle, projenizin hedef kitlesi eski taray\u0131c\u0131lar\u0131 i\u00e7eriyorsa uyumlulu\u011fu kontrol etmek ve gerekti\u011finde yedek (fallback) stiller sa\u011flamak \u00f6nemlidir. Can I Use gibi kaynaklar, \u00f6zelliklerin taray\u0131c\u0131 deste\u011fini kontrol etmek i\u00e7in harika ara\u00e7lard\u0131r.<\/p>\n
\u00d6rnek Senaryolar ve Kod Par\u00e7ac\u0131klar\u0131<\/h3>\n
Basit Duyarl\u0131 Navigasyon<\/h4>\n
Mobil cihazlarda men\u00fcy\u00fc y\u0131\u011f\u0131lm\u0131\u015f hale getirme ve masa\u00fcst\u00fcnde yatay bir men\u00fc g\u00f6sterme.<\/p>\n
\n\/ Mobil \u0130lk Varsay\u0131lan Stiller <\/em>\/\n.navbar {\n  background-color: #333;\n  padding: 10px;\n}\n\n.nav-list {\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-direction: column; \/ Mobil varsay\u0131lan: dikey <\/em>\/\n}\n\n.nav-item {\n  margin-bottom: 5px;\n}\n\n.nav-link {\n  display: block;\n  padding: 10px 15px;\n  color: white;\n  text-decoration: none;\n  text-align: center;\n}\n\n\/ Masa\u00fcst\u00fc ve \u00fczeri i\u00e7in medya sorgusu <\/em>\/\n@media screen and (min-width: 768px) {\n  .nav-list {\n    flex-direction: row; \/ Masa\u00fcst\u00fc: yatay <\/em>\/\n    justify-content: flex-end;\n  }\n\n  .nav-item {\n    margin-left: 15px;\n    margin-bottom: 0;\n  }\n\n  .nav-link {\n    padding: 5px 10px;\n  }\n}\n<\/code><\/pre>\n
G\u00f6r\u00fcnt\u00fc Boyutland\u0131rma<\/h4>\n
Farkl\u0131 ekran boyutlar\u0131nda farkl\u0131 g\u00f6r\u00fcnt\u00fc boyutlar\u0131 veya \u00e7\u00f6z\u00fcn\u00fcrl\u00fckleri kullanma.<\/p>\n
\n\/ Mobil varsay\u0131lan: k\u00fc\u00e7\u00fck g\u00f6rsel <\/em>\/\n.hero-image {\n  width: 100%;\n  height: 200px;\n  background-image: url('hero-small.jpg');\n  background-size: cover;\n  background-position: center;\n}\n\n\/ Tabletler i\u00e7in: orta boy g\u00f6rsel <\/em>\/\n@media screen and (min-width: 768px) {\n  .hero-image {\n    height: 300px;\n    background-image: url('hero-medium.jpg');\n  }\n}\n\n\/ Masa\u00fcst\u00fc i\u00e7in: b\u00fcy\u00fck g\u00f6rsel <\/em>\/\n@media screen and (min-width: 1200px) {\n  .hero-image {\n    height: 400px;\n    background-image: url('hero-large.jpg');\n  }\n}\n\n\/ Y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc ekranlar i\u00e7in (Retina vb.) <\/em>\/\n@media screen and (min-resolution: 2dppx) {\n  .hero-image {\n    background-image: url('hero-large@2x.jpg'); \/ Daha y\u00fcksek \u00e7\u00f6z\u00fcn\u00fcrl\u00fckl\u00fc g\u00f6rsel <\/em>\/\n  }\n}\n<\/code><\/pre>\n
Tema De\u011fi\u015fikli\u011fi (Koyu Mod)<\/h4>\n
Kullan\u0131c\u0131n\u0131n i\u015fletim sistemi tercihine g\u00f6re koyu veya a\u00e7\u0131k tema uygulama.<\/p>\n
\n\/ Varsay\u0131lan (a\u00e7\u0131k) tema stilleri <\/em>\/\nbody {\n  background-color: #f0f2f5;\n  color: #333;\n  font-family: Arial, sans-serif;\n}\n\nh1, h2, h3 {\n  color: #222;\n}\n\n.card {\n  background-color: #fff;\n  border: 1px solid #ddd;\n  padding: 20px;\n  margin-bottom: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n\/ Koyu tema i\u00e7in medya sorgusu <\/em>\/\n@media (prefers-color-scheme: dark) {\n  body {\n    background-color: #1a1a1a;\n    color: #e0e0e0;\n  }\n\n  h1, h2, h3 {\n    color: #f0f0f0;\n  }\n\n  .card {\n    background-color: #2c2c2c;\n    border-color: #444;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.3);\n  }\n\n  a {\n    color: #8ab4f8; \/ Koyu modda daha g\u00f6r\u00fcn\u00fcr bir link rengi <\/em>\/\n  }\n}\n<\/code><\/pre>\n
Sonu\u00e7<\/h3>\n
CSS Medya Sorgular\u0131, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir. \u00c7e\u015fitli cihazlar ve kullan\u0131c\u0131 tercihleri i\u00e7in uyarlanabilir ve eri\u015filebilir web deneyimleri olu\u015fturman\u0131n anahtar\u0131d\u0131rlar. width<\/code> ve height<\/code> gibi temel ekran boyutland\u0131rma \u00f6zelliklerinden prefers-color-scheme<\/code> ve prefers-reduced-motion<\/code> gibi kullan\u0131c\u0131 tercihlerine kadar geni\u015f bir yelpazede \u00f6zellik sunarak, geli\u015ftiricilere web sitelerini her senaryoya g\u00f6re hassas bir \u015fekilde ayarlama imkan\u0131 tan\u0131rlar. Mobil-first yakla\u015f\u0131m\u0131n\u0131 benimsemek, iyi tan\u0131mlanm\u0131\u015f k\u0131r\u0131lma noktalar\u0131 kullanmak ve yeni nesil kapsay\u0131c\u0131 sorgular\u0131 gibi \u00f6zellikleri takip etmek, gelece\u011fe d\u00f6n\u00fck ve kullan\u0131c\u0131 dostu web siteleri in\u015fa etmenin en iyi yollar\u0131d\u0131r. Medya sorgular\u0131n\u0131 ustaca kullanarak, her kullan\u0131c\u0131n\u0131n cihaz\u0131ndan ba\u011f\u0131ms\u0131z olarak keyifli ve i\u015flevsel bir deneyim ya\u015famas\u0131n\u0131 sa\u011flayabiliriz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber\nGiri\u015f: Medya Sorgular\u0131 Nedir ve Neden \u00d6nemlidir?\nG\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda kul","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-30676","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nCSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber\" \/>\n<meta property=\"og:description\" content=\"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber Giri\u015f: Medya Sorgular\u0131 Nedir ve Neden \u00d6nemlidir? G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda kul\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-30T13:41:28+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber\",\"datePublished\":\"2025-09-30T13:41:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/\"},\"wordCount\":2267,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/\",\"name\":\"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-30T13:41:28+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber","og_description":"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber Giri\u015f: Medya Sorgular\u0131 Nedir ve Neden \u00d6nemlidir? G\u00fcn\u00fcm\u00fcz\u00fcn dijital d\u00fcnyas\u0131nda kul","og_url":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-30T13:41:28+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"15 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber","datePublished":"2025-09-30T13:41:28+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/"},"wordCount":2267,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/","name":"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-30T13:41:28+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/css-medya-sorgulari-hizli-referans-ve-kapsamli-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Medya Sorgular\u0131: H\u0131zl\u0131 Referans ve Kapsaml\u0131 Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30676"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30676\/revisions"}],"predecessor-version":[{"id":30677,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30676\/revisions\/30677"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30676"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30676"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}