{"id":3793,"date":"2024-11-13T12:30:09","date_gmt":"2024-11-13T09:30:09","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/css-media-queries-ile-responsive-tasarim-ustalasma\/"},"modified":"2024-11-13T12:30:09","modified_gmt":"2024-11-13T09:30:09","slug":"css-media-queries-ile-responsive-tasarim-ustalasma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-media-queries-ile-responsive-tasarim-ustalasma\/","title":{"rendered":"CSS Media Queries ile Responsive Tasar\u0131m Ustala\u015fma"},"content":{"rendered":"

CSS Media Queries ile Responsive Tasar\u0131m Ustala\u015fma<\/p>\n

G\u00fcn\u00fcm\u00fczde web tasar\u0131m\u0131nda en \u00f6nemli konulardan biri responsive tasar\u0131md\u0131r. Kullan\u0131c\u0131lar\u0131n \u00e7e\u015fitli cihazlarda web sitenizi sorunsuz bir \u015fekilde deneyimlemesini sa\u011flamak i\u00e7in responsive tasar\u0131m \u015fartt\u0131r. Responsive tasar\u0131m, web sitenizin farkl\u0131 ekran boyutlar\u0131nda otomatik olarak ayarlanmas\u0131n\u0131 sa\u011flayan bir tekniktir ve CSS Media Queries bu konuda en \u00f6nemli ara\u00e7t\u0131r.<\/p>\n

CSS Media Queries Nedir?<\/h2>\n

CSS Media Queries, web sayfalar\u0131n\u0131n farkl\u0131 cihazlar i\u00e7in nas\u0131l g\u00f6r\u00fcnt\u00fclendi\u011fini kontrol etmek i\u00e7in kullan\u0131lan CSS kural k\u00fcmesidir. Media Queries, ekran boyutunu, cihaz\u0131n y\u00f6n\u00fcn\u00fc, \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc ve di\u011fer fakt\u00f6rleri temel alarak farkl\u0131 stiller uygulayabilmenizi sa\u011flar.<\/p>\n

Media Queries Nas\u0131l Kullan\u0131l\u0131r?<\/h2>\n

Media Queries, @media kural\u0131 kullan\u0131larak tan\u0131mlan\u0131r. @media kural\u0131, belirli ko\u015fullar\u0131n kar\u015f\u0131land\u0131\u011f\u0131nda uygulanacak bir stil blo\u011fu tan\u0131mlar. \u00d6rne\u011fin, ekran geni\u015fli\u011finin 768 pikselden az oldu\u011fu durumlarda farkl\u0131 bir stil uygulamak isterseniz a\u015fa\u011f\u0131daki kodu kullanabilirsiniz:<\/p>\n

“`html
\n@media (max-width: 768px) {
\n \/* 768 pikselden az ekran geni\u015fli\u011finde uygulanacak stiller *\/
\n}
\n“`<\/p>\n

Media Queries Kullanma \u00d6rnekleri<\/h2>\n

Media Queries, farkl\u0131 ekran boyutlar\u0131na g\u00f6re web sitenizi optimize etmek i\u00e7in \u00e7e\u015fitli \u015fekillerde kullan\u0131labilir. \u0130\u015fte baz\u0131 yayg\u0131n kullan\u0131m \u00f6rnekleri:<\/p>\n

1. Mobil Cihazlar \u0130\u00e7in Men\u00fcleri Optimize Etme<\/h3>\n

Mobil cihazlarda web sayfalar\u0131n\u0131n s\u0131n\u0131rl\u0131 ekran alan\u0131 vard\u0131r. Bu nedenle, mobil cihazlarda men\u00fcleri optimize etmek \u00f6nemlidir. \u00d6rne\u011fin, mobil cihazlar i\u00e7in bir hamburger men\u00fcs\u00fc kullanabilirsiniz. Hamburger men\u00fcs\u00fc, k\u00fc\u00e7\u00fck bir simge ile temsil edilir ve t\u0131kland\u0131\u011f\u0131nda bir men\u00fc a\u00e7\u0131l\u0131r.<\/p>\n

“`html
\n@media (max-width: 768px) {
\n .menu {
\n display: none;
\n }<\/p>\n

.hamburger-menu {
\n display: block;
\n }
\n}
\n“`<\/p>\n

2. Resim Boyutlar\u0131n\u0131 Ayarlama<\/h3>\n

Farkl\u0131 ekran boyutlar\u0131nda resim boyutlar\u0131n\u0131 ayarlamak, web sitenizin h\u0131zl\u0131 y\u00fcklenmesini sa\u011flar. Media Queries kullanarak farkl\u0131 ekran boyutlar\u0131 i\u00e7in farkl\u0131 resim boyutlar\u0131 tan\u0131mlayabilirsiniz.<\/p>\n

“`html
\n@media (max-width: 768px) {
\n .image {
\n width: 100%;
\n }
\n}
\n“`<\/p>\n

3. Tipografiyi Ayarlama<\/h3>\n

Mobil cihazlarda k\u00fc\u00e7\u00fck yaz\u0131 tipi boyutlar\u0131 okumay\u0131 zorla\u015ft\u0131rabilir. Media Queries kullanarak mobil cihazlarda yaz\u0131 tipi boyutunu art\u0131rabilirsiniz.<\/p>\n

“`html
\n@media (max-width: 768px) {
\n body {
\n font-size: 16px;
\n }
\n}
\n“`<\/p>\n

Media Queries ile Responsive Tasar\u0131m\u0131n Avantajlar\u0131<\/h2>\n

Media Queries kullanarak responsive tasar\u0131m olu\u015fturman\u0131n bir\u00e7ok avantaj\u0131 vard\u0131r. \u0130\u015fte baz\u0131 \u00f6nemli avantajlar:<\/p>\n