Bu Son Derece Basit CSS Aracıyla Belirli Cihazlar için Medya Sorguları Oluşturun

Duyarlı web tasarımı ile uğraşmayı denediyseniz, bunun sinir bozucu olabileceğini ilk elden bileceksiniz. Sitenizin hemen hemen her cihazda harika görünmesini sağlamak göz korkutucu bir iştir. Dahası, sitenizin tasarımının belirli bir cihazda nasıl görüneceğinden emin olamamak, geri dönen ziyaretçilerle sonuçlanabilir. CSS medya sorguları, duyarlı bir web sitesi oluşturmaya yardımcı olmanın basit bir yoludur.

SimpleCSS, kesme noktanıza veya platformunuza dayalı olarak sizin için medya sorguları oluşturan çevrimiçi bir araçtır ve bu gönderide bunları üç tıklamayla nasıl oluşturabileceğinizi göstereceğiz. Özetlemek için, Divi'nin medya sorgularını kutudan çıkar çıkmaz nasıl uyguladığını da göstereceğiz.

CSS Medya Sorgularına Giriş

CSS medya sorguları, duyarlı web tasarımının temel taşı teknolojisidir. CSS @media etiketi, farklı medya türlerine ve cihazlara göre stil kurallarını belirlemek için kullanılır. Basit İngilizce'de, medya sorguları web sayfanıza erişen cihazın kapasitesini değerlendirir ve özelliklerini kontrol eder. Bunlar genellikle şunları içerir:

1. Görünüm alanının genişliği ve yüksekliği.
2. Cihazın çözünürlüğü.
3. Cihazın yönü.

Duyarlı web tasarımı, sitenizi farklı cihazlarda kullanılacak şekilde uyarlamaya odaklanır. Örneğin, sitenizde gezinmek için fare kullanan bir ziyaretçi ile dokunmatik ekran arasında önemli bir kullanıcı deneyimi farkı vardır. Medya sorguları, web geliştiricilerinin site tasarımındaki boşluğu doldurmasını sağlar:

Sitenizin kodunu, web sitenize erişen yüzlerce cihazın her birine hitap edecek şekilde yeniden yazmak mümkün değildir. Medya sorguları, aynı temel HTML kodunu kullanarak, aygıtın ekran boyutuna ve yönüne göre dinamik olarak basit kurallara göre ayarlanarak çalışır.

CSS3, web geliştiricilerinin, cihazın sayfa genişliğine göre stiller tanımlamasına olanak tanır. Aygıtın sayfa genişliği, boyutuyla ilişkili olduğundan, geliştiriciler, medya sorgularına koşullu kurallar ekleyerek çeşitli ekran boyutlarındaki aygıtlar için temelde farklı düzenler tanımlayabilir. Koşullu kurallar yazmak için kullanılan en sık kullanılan ifadelerden bazıları min-width , max-width ve oryantasyondur .

Özetle, medya sorguları temel olarak cihazın ekranının ne kadar büyük olduğunu bulur ve ardından bu ekran boyutuna belirli bir CSS uygular.

Medya Sorgularını Kullanmanın Yararları

Medya sorgularını kullanmanın en önemli yararı, kullandıkları cihazdan bağımsız olarak web sitenizin herkes tarafından kolayca görüntülenebilir olmasıdır. Teknik açıdan bakıldığında, medya sorguları tüm büyük tarayıcılarla uyumludur ve sitenizin arama motoru sonuçlarında daha iyi sıralanmasına yardımcı olabilir. Medya sorgularını kullanmanın bazı ek faydaları şunlardır:

• Mobil cihazlarda potansiyel performans artışı.
• Mobil cihazlara öncelik veren duyarlı bir tasarım oluşturmanıza olanak tanır.
• Ziyaretçilere potansiyel olarak daha iyi bir kullanıcı deneyimi sağlarlar.
• Sitenizin cihaz için optimize edilmiş sürümlerini görüntüleme yeteneği.

Medya sorguları, ideal olarak, belirli bir sayfa öğesini duyarlı hale getirmeniz gerektiğinde kullanılmalıdır. Örneğin, siteniz üç sütunlu bir tasarıma bölünmüşse, büyük olasılıkla akıllı telefon gibi daha küçük bir ekranda okunmayacaktır. Medya sorguları, daha küçük ekranlar için düzeni tek sütunlu bir tasarıma değiştirmenize olanak tanır.

SimpleCSS Aracının Tanıtımı

Tabii ki, tüm bu medya sorgularını oluşturmak hızla bir acıya dönüşebilir. SimpleCSS, onları oluşturmak için inanılmaz derecede kullanışlı bir araçtır, belirli cihazları hedeflemenin tüm yükünü kaldırmaya yardımcı olur ve koşullu ifadelerle uğraşmayı ortadan kaldırır. Hadi bir bakalım!

SimpleCSS

Adından da anlaşılacağı gibi SimpleCSS, web tasarımcılarının ve ön uç geliştiricilerin belirli cihazlar için medya sorguları oluşturmasını sağlayan kullanımı kolay bir araçtır. Bir cihaz seçtiğinizde, araç, o cihaza uyarlanmış bir medya sorgusu verir ve bu sorgu daha sonra CSS dosyalarınıza yapıştırılabilir. SimpleCSS ayrıca kesme noktalarına dayalı medya sorguları oluşturur.

Ana Özellikler:

• Önce mobil ve önce masaüstü olmak üzere iki farklı yaklaşımdan başlamanıza olanak tanır.
• Sorgular oluşturmak için genel bir cihaz seçmenizi sağlar.
• 286 farklı cihaz için medya sorguları sunar.

Fiyat: Ücretsiz | Daha fazla bilgi

SimpleCSS Kullanarak Medya Sorguları Nasıl Oluşturulur (3 Tıklamayla)

Şimdi medya sorgularının ne olduğuna ve bunları oluşturmayı basitleştiren araca baktık, gelin size sadece üç tıklamayla nasıl medya sorguları oluşturacağınızı gösterelim!

Adım 1: Yaklaşımınızı Seçin

Medya sorgunuzu seçmenin ilk adımı, duyarlı tasarımınız için bir yaklaşıma karar vermektir ve Önce Mobil veya Önce Masaüstü arasından seçim yapmanız gerekir :

Seçim yapmakta zorlanıyorsanız, her ikisinin de ne anlama geldiğine dair sıska:

1. Önce Mobil : Bu yaklaşım, odağı mobil cihazlara vererek, ekranınızı daha büyük ekranlı cihazlardan önce ilk olanlar için optimize etmenize olanak tanır.
2. Önce Masaüstü : Bu yaklaşım, sitenizin daha küçük ekranlar yerine daha büyük ekranlarda iyi görünmesini sağlamak için tasarlanmıştır.

Ardından, bir cihaz türü seçmeniz gerekecek.

Adım #2: Cihaz Türünü Belirtin

Yaklaşımınızı seçtikten sonraki adım, beş farklı kesme noktasından birini seçmektir – Küçük Telefon , Akıllı Telefon , Tablet , Dizüstü Bilgisayar ve Masaüstü . Bu, okuyucunun cihazı için en uygun düzeni sağlamak üzere sitenizin değiştiği noktalardır:

Bu adım basittir – medya sorguları oluşturmak istediğiniz cihaza tıklamanız yeterlidir!

3. Adım: Medya Sorgusunu Kopyalayın

Bir cihaz seçtikten sonra, medya sorgunuzu içeren kalıcı bir açılır pencere belirecektir. Buradan, kodu kopyalayıp CSS dosyanızdaki uygun yere yapıştırmanız yeterlidir:

SimpleCSS Kullanarak Belirli Bir Cihaz İçin Medya Sorguları Nasıl Oluşturulur

Genel medya sorguları oluşturmak genel bir yaklaşım olarak iyidir, ancak bunları belirli bir cihaz için oluşturmanız gerekiyorsa ne olur? Size nasıl yapacağınızı gösterelim – yine üç tıklamayla!

Adım #1: Cihazınızın İşletim Sistemini Belirtin

İlk olarak, medya sorguları oluşturmak istediğiniz cihazın işletim sistemini seçin. SimpleCSS, iOS, Android ve Windows'u destekler. Bonus olarak, kullanmakta olduğunuz ekran için medya sorguları da oluşturabilirsiniz!

Adım #2: Cihazınızı Seçin

İşletim sisteminizi seçtikten sonra, mevcut cihaz seçeneklerini filtrelemeniz gerekir. SimpleCSS'de desteklenen 286 farklı cihaz vardır ve seçimler biraz zorsa (özellikle Android cihazlar için), seçenekleri daraltmak için arama çubuğunu kullanabilirsiniz:

3. Adım: Medya Sorgusunu Kopyalayın

İlgili cihaza tıkladığınızda, oluşturulan medya sorgunuzu içeren ve panonuza kopyalanmaya hazır olan kalıcı bir açılır pencere ile bir kez daha karşılaşacaksınız:

Hepsi bu kadar! Bir daha asla manuel olarak medya sorguları oluşturmanız gerekmeyecek ve siteleriniz yanıt vermeye bir adım daha yakın olabilir.

Duyarlı Tasarım ve Divi

Divi temamız zaten medya sorgularına dayalı duyarlı bir tasarım uygular, yani bunları kendiniz oluşturmanız gerekmeyebilir. Tarayıcınızın penceresini yeniden boyutlandırdığınızda ne olduğunu görmek için bu örneğe göz atın:

Tema, medya sorgularını kullanmanın arkasındaki öncül olan değişen pencere boyutuna dinamik olarak uyum sağlar. Tarayıcı pencerenizin genişliği azaldıkça, düzen değişir ve içeriğin hala okunması kolay olur. Üç farklı kesme noktası harekete geçer ve Divi'nin düzenine akışkan benzeri bir his verir. Farklı kesme noktalarında tetiklenen medya sorgusu devreye girer ve tasarımın düzeni buna göre değişir.

Çözüm

Web siteniz yanıt vermiyorsa, arama motoru sıralamalarında büyük olasılıkla zarar görecektir. Sitenizin yanıt vermeye devam etmesini sağlamanın bir yolu medya sorgularını kullanmaktır. Geçmişte bunları oluşturmak zor olsa da, SimpleCSS gibi bir araçla bunları oluşturmak hızlı ve basittir.

Üç tıklamayla nasıl medya sorguları oluşturabileceğinizi özetleyelim:

1. Yaklaşımınızı ve cihazınızı veya istediğiniz işletim sistemini seçin.
2. Uygun cihaz türünü belirtin.
3. Oluşturulan medya sorgusunu kopyalayın ve CSS dosyanıza yapıştırın.

Belirli cihazlar için medya sorguları oluşturma hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünden iletişime geçin ve sohbeti takip etmek için abone olmayı unutmayın!

Makale küçük resmi, Ira Yapanda / Shutterstock.com'dan.