img
Responsive Web Tasarımı İçin Media Queries Kullanımı

Responsive Web Tasarımı İçin Media Queries Kullanımı

Web geliştiriciler için responsive web tasarımı, kullanıcı deneyimini farklı cihazlarda optimize etmek için oldukça önemlidir. Bu makalede, 'media queries', 'responsive web tasarımı', 'duyarlı tasarım' ve 'CSS media queries' anahtar kelimeleri çerçevesinde, media queries kullanarak responsive web tasarımları oluşturma sürecini adım adım inceleyeceğiz.

Media Queries Nedir?

Media queries, CSS ile kullanılan ve web sayfalarının farklı cihaz ve ekran boyutlarına göre uyarlanmasını sağlayan bir tekniktir. Media queries, cihazın genişliği, yüksekliği, çözünürlüğü, yönü gibi özelliklerini kontrol ederek uygun stillerin uygulanmasını sağlar.

Media Queries'in Önemi

  • Kullanıcı Deneyimi: Farklı cihazlarda tutarlı ve kullanıcı dostu bir deneyim sağlar.
  • SEO: Mobil uyumlu web siteleri arama motorları tarafından tercih edilir.
  • Erişilebilirlik: Her türlü cihazdan erişimi kolaylaştırır.

Responsive Tasarım İlkeleri

Responsive web tasarımı, bir web sitesinin farklı ekran boyutlarına ve cihaz türlerine uyum sağlamasını sağlar. Bu, CSS media queries kullanılarak gerçekleştirilir ve bazı temel ilkelerle desteklenir.

Temel İlkeler

  1. Esnek Grid ve Layoutlar: Yüzde bazlı genişlikler ve esnek grid yapıları kullanmak.
  2. Esnek Görseller: Görsellerin ve medya öğelerinin ekran boyutuna göre yeniden boyutlandırılması.
  3. Media Queries: Farklı ekran boyutlarına göre özel stiller tanımlamak.

Media Queries ile Layout Ayarları

Media queries kullanarak farklı cihazlar için layout ayarları yapabiliriz. Bu, her cihaz türü için uygun bir tasarım sunmamızı sağlar.

Temel Kullanım

Aşağıdaki örnek, media queries kullanarak 768 pikselin altındaki ekranlar için stil tanımlar:

/* Varsayılan stil */
.container {
    width: 100%;
    padding: 20px;
}

/* Tablet ve altı ekranlar için */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}

Bu örnekte, container sınıfına sahip elementin varsayılan olarak %100 genişlikte ve 20 piksel padding'e sahip olduğu görülür. Ekran genişliği 768 piksel veya daha az olduğunda, padding 10 piksel olarak değişir.

Daha Gelişmiş Kullanım

Farklı cihazlar ve ekran boyutları için birden fazla media queries kullanarak daha karmaşık düzenler oluşturabilirsiniz.

/* Varsayılan stil */
.container {
    width: 100%;
    padding: 20px;
}

/* Tabletler için */
@media (max-width: 768px) {
    .container {
        padding: 10px;
        font-size: 14px;
    }
}

/* Akıllı telefonlar için */
@media (max-width: 480px) {
    .container {
        padding: 5px;
        font-size: 12px;
    }
}

Bu örnekte, container sınıfına sahip element için farklı cihaz türlerine göre stil değişiklikleri yapılmıştır.

Örnek Kod ve Uygulama

Aşağıda, media queries kullanarak responsive bir web tasarımı oluşturma sürecini adım adım açıklayacağız.

HTML Yapısı

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Tasarımı</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Responsive Tasarım Örneği</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Hakkında</a></li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </nav>
        <main>
            <p>Bu, media queries kullanarak oluşturulmuş basit bir responsive tasarım örneğidir.</p>
        </main>
    </div>
</body>
</html>

CSS Stilleri ve Media Queries

/* Varsayılan stil */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
}

header {
    text-align: center;
    padding: 10px 0;
    background-color: #333;
    color: #fff;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 10px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
}

/* Tabletler için */
@media (max-width: 768px) {
    .container {
        width: 90%;
        padding: 10px;
    }

    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 5px 0;
    }
}

/* Akıllı telefonlar için */
@media (max-width: 480px) {
    header {
        font-size: 16px;
    }

    nav ul li a {
        font-size: 14px;
    }

    main p {
        font-size: 12px;
    }
}

Bu örnekte, farklı ekran boyutlarına göre layout ayarları yapılmıştır. Varsayılan olarak, geniş bir container ve yatay menü stili uygulanmıştır. Ekran genişliği 768 pikselin altına düştüğünde, container genişliği azaltılmış ve menü dikey olarak hizalanmıştır. 480 pikselin altındaki ekranlar için ise yazı boyutları küçültülmüştür.

Media queries kullanarak responsive web tasarımı oluşturmak, kullanıcıların farklı cihazlarda en iyi deneyimi yaşamalarını sağlar. Bu makalede, 'media queries', 'responsive web tasarımı', 'duyarlı tasarım' ve 'CSS media queries' anahtar kelimeleri çerçevesinde, media queries kullanarak responsive web tasarımları oluşturma sürecini adım adım inceledik. Bu bilgiler ve örnek kodlar ile projelerinizde media queries kullanarak duyarlı tasarımlar oluşturabilirsiniz.

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    20.6K
    1000.00₺
  • Canlı Radyo Dark Scripti

    13.2K
    1000.00₺
  • Canlı Radyo Light Scripti

    7.9K
    1000.00₺
  • Rüzgar Radyo Scripti

    8.1K
    0.00₺
  • Radyo Minimal

    3.9K
    1000.00₺
  • Ekitap Scripti

    6K
    3000.00₺
  • Aşk Sevgililer Günü Evlilik

    7.5K
    1000.00₺
  • Sohbet Scripti

    7.6K
    0.00₺
  • Dialog Whatsapp Benzeri Sohbet

    4.6K
    0.00₺
  • Firebase Chat

    3.7K
    0.00₺
  • Web Ajans Scripti

    23.9K
    3000.00₺
  • Ajans Scripti Kolay Kullanım

    2.9K
    1000.00₺
  • Ajans Scripti V2

    3K
    1000.00₺
  • Ajans Scripti V3

    3K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    2K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    2.6K
    1000.00₺
  • Mobil Uyumlu Çilingir Scripti

    1.9K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    2.6K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    2.2K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    39.3K
    1000.00₺
  • İlaçlama Şirketi Web Tasarımı

    5.2K
    1000.00₺
  • İlan Web Tasarımı

    2.2K
    1000.00₺
  • İlan Web Tasarımı V2

    2.2K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    1.9K
    1000.00₺
  • İnşaat Firması Tasarımı V2

    2K
    1000.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    2.5K
    1000.00₺
  • Kombi Klima Servisi Web Tasarımı

    2.2K
    1000.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    2.2K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V2

    3.3K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V3

    3.3K
    1000.00₺
  • Ajans Web Tasarımı V4

    2.4K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    2.9K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V5

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V6

    3.1K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V7

    3.5K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V8

    3K
    1000.00₺
  • Mobilya Dekorasyon Web Tasarımı

    2.6K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    2.1K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    2.4K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    2.6K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    2.3K
    1000.00₺
  • Otel Pansiyon Web Tasarımı

    2.3K
    1000.00₺
  • Özel Oto Servis Web Tasarımı

    2.1K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    5.9K
    1000.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    3.2K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    2.7K
    1000.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    2.6K
    1000.00₺
  • Teknik Servis Web Tasarımı

    2.7K
    1000.00₺
  • Sigorta Acenta Web Tasarımı

    2.2K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    2.1K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    2.6K
    1000.00₺
  • Sürücü Kursu Web Tasarımı

    2.8K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı

    2.9K
    1000.00₺
  • Tek Ürün Satış Web Tasarımı V2

    2.6K
    1000.00₺
  • Tek Ürün Yaprak Web Tasarımı

    2.4K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    2.7K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    2.6K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı

    2.7K
    1000.00₺
  • Temizlik Şirketi Web Tasarımı V2

    2.7K
    1000.00₺
  • Ajans Web Tasarımı V5

    3K
    1000.00₺
  • Ajans Web Tasarımı V6

    4.2K
    1000.00₺
  • Werock Radyo Web Tasarımı

    4.1K
    1000.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    1.4K
    1000.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    1.4K
    1000.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    5.3K
    1000.00₺
  • İnşaat Firması Web Tasarımı V3

    1.4K
    1000.00₺
  • Kurumsal Firma Web Tasarımı V9

    1.5K
    1000.00₺
  • Mimarlık Web Tasarımı

    1.3K
    1000.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    1.5K
    1000.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    1.4K
    1000.00₺
  • Psikolog Web Tasarımı

    1.5K
    1000.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    1.7K
    1200.00₺
  • Sürücü Kursu Web Tasarımı V2

    1.7K
    1000.00₺
  • Teknik Servis Web Tasarımı V3

    2K
    1000.00₺
  • Ajans Web Tasarımı V7

    1.6K
    900.00₺
  • Google Indexing Api

    319
    500.00₺
  • Milando Radyo Wordpress Teması

    247
    1000.00₺

Vip Tema Web Ajans Yazılımı

Profesyonel ve her yönü ile kontrol edilebilir gelişmiş çok özellikli ajans yazılımıdır. İşte öne çıkan özellikler.

  • PAYTR Ödeme Entegrasyonu
  • SHIPY Ödeme Entegrasyonu
  • WHM Hosting Satış Entegrasyonu
  • Domain Sorgulama/Satış Entegrasyonu
  • Google Authenticator
  • SMS 2 Faktörlü Doğrulama
  • Net Gsm SMS Entegrasyonu
  • İleti Merkezi SMS Entegrasyonu
  • İnteraktif SMS Entegrasyonu
  • Mas GSM SMS Entegrasyonu
img
Load Time (S) : 0.007965