Ortam Sorguları bir CSS3 modülünde farklı aygıtlar ya da ortam türleri için farklı stil kuralları tanımlayarak dinamik web siteleri tasarlamanıza yardımcı olur. Bu kurallara bağlı olarak ekran boyutları, tarayıcı penceresi boyutları, aygıt boyutları, yönlendirme ve çözünürlük gibi çeşitli koşullara uyum sağlayacak içerik oluşturulabilir.
@media kuralını kullanarak CSS'nize ortam sorguları ekleyebilirsiniz. Veya, farklı ortam türleri için ayrı stil sayfaları oluşturabilir ve bunları aşağıdaki sözdizimini kullanarak çağırabilirsiniz:
<link rel='stylesheet' media='all' href='normal.css' /> <link rel='stylesheet' media='print' href='print.css' /> <link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
Aygıttaki tarayıcı ortam sorgusunu kontrol eder ve web sayfasını görüntülemek için karşılık gelen CSS dosyasını kullanır.
Daha fazla bilgi için bu makaleye bakın.
HTML veya CSS dosyalarınıza ilgili kodu ekleyerek medya sorgularını ekleyebilirsiniz. Dreamweaver ayrıca ortam sorgularını şu yollarla kolayca oluşturmanıza ve yönetmenize olanak tanır:
Görsel Ortam Sorgusu çubukları bir sayfada mevcut olan ortam sorgularının görsel bir sunumudur. Bu çubuklar web sayfanızı farklı kesme noktalarında görselleştirmenize ve web sayfanızın farklı bileşenlerinin farklı görüntü kapılarında nasıl aktığını görmenize yardımcı olur. Sayfanızı farklı görüntü kapılarında görüntülerken diğer görünüm kapılarındaki sayfa tasarımını etkilemeden belirli bir görüntü kapısında tasarım değişiklikleri yapabilirsiniz.
Görsel Ortam Sorgusu her bir ortam sorgusu kategorisini temsil eden yatay satır şeklinde üç çubuktan oluşur:
- Yeşil: max-width koşulları olan ortam sorguları
- Mavi : Hem min-width hem de max-width koşulları olan ortam sorguları
- Mor : min-width koşulları olan ortam sorguları
Not:
CSS Tasarımcısı panelinde listelenen ortam sorguları da bu renklerle önceden ayarlanmıştır.
Her kategori bir veya daha fazla ortam sorgusundan oluşur. Medya sorgusu koşulu belge içinde tanımlı değilse, karşılık gelen görsel ortam sorgusu çubuğu da görüntülenmez. Örneğin, belge min-width koşullarını içermiyorsa mor çubuk da görüntülenmez.
Kesme noktası değerleri çubuklar üzerinde belirtilir, çubuğun solunda min-width ve sağında da max-width yer alır.
A. Kesme noktaları B. Görsel Ortam Sorgusu çubukları C. Ortam sorgusu ekle simgesi D. Scrubber
Görsel Ortam Sorgusu çubuğu varsayılan olarak Canlı Görünüm'de görünür durumdadır. Çubuğu gizlemek için araç çubuğundaki Görsel Ortam Sorguları çubuğunu kullanın.
Sayfanızı belirli bir boyutta (kesme noktasında) görüntülemek için karşılık gelen ortam sorgusu çubuğunu tıklatın. Belge, kesme noktasına yerleşir.
Görüntüyü Dreamweaver belge penceresinin boyutuna uygun şekilde yeniden boyutlandırmak için aşağıdaki işlemlerden birini gerçekleştirin:
- Belgenin sağ kısmında “Genişliğe Sığdırmak için Çift Tıklatın” metnini gördüğünüz gri alanda herhangi bir yeri çift tıklatın. Gri alanı göremiyorsanız scrubber'ı sola sürükleyin.
- Belge penceresinin altındaki açılır listeden Tam Genişlik seçeneğini belirleyin.
-
-
Ortam sorguları otomatik olarak yeni min-width ve/veya max-width değerleriyle güncelleştirilir. Ortam sorgusunun başarıyla düzenlendiğini belirten bir bildirim görüntülenir. Görsel ortam sorgusu çubuğuna karşılık gelen birden çok sorgu varsa tüm ortam sorguları güncellenir. Başarı mesajıyla birlikte, güncelleştirilen ortam sorgularının sayısı da görüntülenir.
Not:
Geri almak için Ctrl+Z (Win) veya Cmd+Z (Mac) tuşlarına basın.
Alternatif olarak, kesme noktası değerlerini çift tıklatıp klavyenizi kullanarak değerleri yazabilirsiniz.
Not:
Geri almak için Ctrl+Z (Win) veya Cmd+Z (Mac) tuşlarına basın.
Not:
Geri almak için Ctrl+Z (Win) veya Cmd+Z (Mac) tuşlarına basın.