Web sitenizin mobil cihazlarda harika görünmesini mi istiyorsunuz? CSS'de medya sorgularını nasıl kullanacağınızı öğrenmenin zamanı geldi.
Web siteleri / web uygulamaları geliştirmek istiyorsanız, duyarlı tasarımların nasıl oluşturulacağını bilmek başarınız için çok önemlidir.
Geçmişte, farklı ekran boyutlarına iyi uyum sağlayan web sitelerinin oluşturulması, web sitesi sahiplerinin bir geliştiriciden talep etmesi gereken bir lükstü. Bununla birlikte, akıllı telefonların ve tabletlerin kullanımındaki artış, artık duyarlı tasarımı yazılım geliştirme dünyasında bir zorunluluk haline getirdi.
Medya sorgularını kullanmak, web sitenizin / web uygulamanızın her cihazda tam olarak istediğiniz şekilde görünmesini sağlamanın en iyi yoludur.
Duyarlı Tasarımı Anlamak
Özetle, duyarlı tasarım, çeşitli ekran boyutlarına uyum sağlayan bir web sitesi / web uygulaması düzeni oluşturmak için HTML / CSS kullanmayı ele alır. HTML / CSS'de, bir web sitesi tasarımında yanıt vermenin birkaç farklı yolu vardır:
Piksel (px) yerine rem ve em birimlerini kullanma
Her web sayfasının görüntü alanını / ölçeğini ayarlama
Medya sorgularını kullanma
Medya Sorguları Nelerdir?
Medya sorgusu, CSS3 sürümünde yayınlanan bir CSS özelliğidir. Bu yeni özelliğin tanıtılmasıyla, CSS kullanıcıları, bir web sayfasının görüntüsünü bir cihaz / ekran yüksekliği, genişliği ve yönüne (yatay veya dikey mod) göre ayarlama becerisi kazanırlar.
Medya sorguları, bir kez kod oluşturmak ve programınız boyunca birden çok kez kullanmak için bir çerçeve sağlar. Yalnızca üç web sayfası içeren bir web sitesi geliştiriyorsanız, bu çok yararlı görünmeyebilir, ancak yüzlerce farklı web sayfası olan bir şirket için çalışıyorsanız - bu, çok büyük bir zaman tasarrufu sağlayacaktır.
Medya Sorgularını Kullanma
Medya sorgularını kullanırken göz önünde bulundurmanız gereken birkaç farklı şey vardır: yapı, yerleşim, aralık ve bağlantı.
Medya Sorgu Yapısı Örneği
@media only/not media-type and (expression){/*CSS code*/}Bir medya sorgusunun genel yapısı şunları içerir:
@Media anahtar sözcüğü
Not / only anahtar kelimesi
Bir medya türü (ekran, baskı veya konuşma olabilir)
"Ve" anahtar kelimesi
Parantez içine alınmış benzersiz bir ifade
Bir çift açık ve kapalı küme parantezi içine alınmış CSS kodu.
Tek Anahtar Kelimeli Medya Sorgusu Örneği
Yukarıdaki örnek, CSS stilini (özellikle mavi arka plan rengi) yalnızca 450 piksel ve altı genişliğe sahip cihaz ekranlarına, yani temelde akıllı telefonlara uygular. "Sadece" anahtar sözcüğü "değil" anahtar sözcüğü ile değiştirilebilir ve daha sonra yukarıdaki medya sorgusundaki CSS stili yalnızca yazdırma ve konuşma için geçerli olur.
Bununla birlikte, varsayılan olarak, genel bir medya sorgusu bildirimi üç medya türünün tümü için geçerlidir, bu nedenle amaç bir veya daha fazlasını hariç tutmak olmadığı sürece bir medya türü belirtmeye gerek yoktur.
Varsayılan Ortam Sorgusu Örneği
Medya Sorgularının Yerleştirilmesi
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}
Bir medya sorgusu, bir CSS özelliğidir; bu nedenle yalnızca stil dili içinde kullanılabilir. Kodunuza CSS eklemenin üç farklı yolu vardır; ancak bu yöntemlerden yalnızca ikisi, programlarınıza medya sorgularını dahil etmenin pratik bir yolunu sağlar - dahili veya harici CSS.
Dahili yöntem, <style> etiketinin HTML dosyasının <head> etiketine eklenmesini ve <style> etiketinin parametreleri içinde medya sorgusunun oluşturulmasını içerir.
Harici yöntem, harici bir CSS dosyasında bir ortam sorgusu oluşturmayı ve bunu <link> etiketi aracılığıyla HTML dosyanıza bağlamayı içerir.
Medya Sorgularının Aralığı
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}
Medya sorguları ister dahili ister harici CSS yoluyla kullanılıyor olsun, stil dilinin bir medya sorgusunun işleyişini olumsuz yönde etkileyebilecek bir ana yönü vardır. CSS'nin bir öncelik sırası kuralı vardır. Bir CSS seçici veya bu durumda bir medya sorgusu kullanırken, CSS dosyasına eklenen her yeni medya sorgusu daha önce geleni geçersiz kılar (veya önceliğini alır).
Yukarıda sahip olduğumuz varsayılan medya sorgu kodu akıllı telefonları (450 piksel genişliğinde ve altı) hedeflemektedir; bu nedenle, tabletler için farklı bir arka plan ayarlamak isterseniz, aşağıdaki kodu önceden var olan CSS dosyanıza ekleyebileceğinizi düşünebilirsiniz.
Tablet Ortamı Sorgu Örneği
Tek sorun, öncelik sırasına bağlı olarak tabletlerin kırmızı bir arka plan rengine sahip olması ve akıllı telefonların artık kırmızı bir arka plan rengine sahip olması çünkü 450 piksel ve altı 800 pikselin altında.
/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}
Bu küçük sorunu çözmenin bir yolu, tabletler için medya sorgusunu akıllı telefonlar için olanlardan önce eklemektir; ikincisi ilkini geçersiz kılar ve artık mavi arka plan rengine sahip akıllı telefonlara ve kırmızı arka plan rengine sahip tabletlere sahip olursunuz.
Bununla birlikte, öncelik sırası hakkında endişelenmeden akıllı telefonlar ve tabletler için ayrı bir stil elde etmenin daha iyi bir yolu var. Bu, geliştiricinin maksimum ve minimum genişliğe (aralık) sahip bir medya sorgusu oluşturabildiği, aralık belirtimi olarak bilinen bir medya sorguları özelliğidir.
Aralık Örneğiyle Tablet Ortam Sorgusu
Yukarıdaki örnekte, medya sorgularının bir stil sayfası içine yerleştirilmesi, tabletlerin ve akıllı telefonların tasarımı iki ayrı genişlik koleksiyonunu hedeflediğinden önemsiz hale gelir.
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
Medya Sorgularını Bağla
Medya sorgularını CSS kodunuza gömmek istemiyorsanız, kullanabileceğiniz alternatif bir yöntem vardır. Bu yöntem, bir HTML dosyasının <link> etiketinde medya sorgularını kullanmayı içerir, bu nedenle akıllı telefonlar, tabletler ve bilgisayarlar için stil tercihlerini içeren büyük bir stil sayfasına sahip olmak yerine, üç ayrı CSS dosyası kullanabilir ve ortam sorgularınızı içinde oluşturabilirsiniz. <link> etiketi.
<link> etiketi, harici bir stil sayfasından CSS stilini içe aktarmak için kullanılan bir HTML öğesidir. Bu etiket, CSS'de bir medya sorgusu ile aynı şekilde çalışan bir medya özelliğine sahiptir.
<!-- main stylesheet -->
<link rel="stylesheet" href="main.css">
<!-- tablet stylesheet -->
<link rel="stylesheet" media="(max-width:800px) and (min-width:451px)"
href="tablet.css">
<!-- smartphone stylesheet -->
<link rel="stylesheet" media="(max-width:450px)" href="smartphone.css">
Bağlantı etiketi Örneğinde Medya Sorgularını Kullanma
Yukarıdaki kod, HTML dosyanızın <head> etiketine yerleştirilmelidir. Şimdi yapmanız gereken tek şey main.css, tablet.css ve smartphone.css dosya adlarıyla üç ayrı CSS dosyası oluşturmak ve ardından her cihaz için istediğiniz özel tasarımı oluşturmaktır.
Ana dosyadaki stil 800 pikselden büyük tüm ekranlara uygulanacak, tablet dosyasındaki stil 450 piksel ile 801 piksel arasında genişliğe sahip tüm ekranlara ve akıllı telefon dosyasındaki stil aşağıdaki tüm ekranlara uygulanacaktır. 451px.
Artık Duyarlı Tasarımlar Oluşturacak Araçlara Sahipsiniz
Bu makalenin sonuna kadar geldiyseniz, duyarlı tasarımın ne olduğunu ve neden yararlı olduğunu öğrenebildiniz. Artık CSS ve HTML dosyalarındaki medya sorgularını tanımlayabilir ve kullanabilirsiniz. Ek olarak, CSS'de öncelik sırası ile tanıştınız ve bunun medya sorgularınızın işleyişini nasıl etkileyebileceğini gördünüz.
