Duyarlı Web Siteleri Oluşturmak için HTML ve CSS'de Medya Sorguları Nasıl Kullanılır?

Duyarlı Web Siteleri Oluşturmak için HTML ve CSS'de Medya Sorguları Nasıl Kullanılır?

Web siteleri/web uygulamaları geliştirmek istiyorsanız, başarınız için duyarlı tasarımların nasıl oluşturulacağını bilmek ö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ü. Ancak, akıllı telefonların ve tabletlerin kullanımındaki artış, artık yazılım geliştirme dünyasında duyarlı tasarımı bir zorunluluk haline getirdi.



Medya sorgularını kullanmak, web sitenizin/web uygulamanızın her cihazda tam olarak istediğiniz gibi 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 kullanmakla ilgilenir. 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ünüm 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 yeteneği kazanır.



Devamını oku: Temel CSS3 Özellikleri Hile Sayfası

Medya sorguları, bir kez kod oluşturmak ve bunu programınız boyunca birden çok kez kullanmak için bir çerçeve sağlar. Yalnızca üç web sayfası olan bir web sitesi geliştiriyorsanız bu çok yararlı görünmeyebilir, ancak yüzlerce farklı web sayfası olan bir şirkette çalışıyorsanız, bu çok büyük bir zaman tasarrufu sağlayacaktır.



Medya Sorgularını Kullanma

Medya sorgularını kullanırken dikkate almanız gereken birkaç farklı şey vardır: yapı, yerleşim, aralık ve bağlantı.

Medya Sorgularının Yapısı

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üğü
  • Değil/yalnızca anahtar kelime
  • Bir ortam türü (ekran, baskı veya konuşma olabilir)
  • anahtar kelime ve
  • Parantez içine alınmış benzersiz bir ifade
  • Bir çift açık ve kapalı kaşlı ayraç içine alınmış CSS kodu.

İlgili: Yazdırmak için Belgeleri Biçimlendirmek için CSS Kullanma

Yalnızca Anahtar Kelime İçeren Bir Medya Sorgusu Örneği


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Yukarıdaki örnek, CSS stilini (özellikle mavi bir arka plan rengi) yalnızca genişliği 450 piksel ve altı olan cihaz ekranlarına, yani temelde akıllı telefonlara uygular. Tek anahtar sözcük, değil anahtar sözcüğüyle değiştirilebilir ve ardından yukarıdaki medya sorgusundaki CSS stili yalnızca yazdırma ve konuşma için geçerli olur.

Ancak, varsayılan olarak, genel bir ortam sorgu bildirimi üç ortam türünün tümü için geçerlidir, bu nedenle amaç bir veya daha fazlasını dışlamak olmadıkça bir ortam türü belirtmeye gerek yoktur.

Varsayılan Medya Sorgusu Örneği


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Medya Sorgularının Yerleştirilmesi

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, ortam sorgularını programlarınıza dahil etmenin pratik bir yolunu sunar: dahili veya harici CSS.

Dahili yöntem, etiketi HTML dosyasının etiketine eklemeyi ve etiket parametreleri içinde medya sorgusu oluşturmayı içerir.

Harici yöntem, harici bir CSS dosyasında bir medya sorgusu oluşturmayı ve bunu etiket aracılığıyla HTML dosyanıza bağlamayı içerir.

Medya Sorguları Aralığı

Medya sorguları ister dahili ister harici CSS aracılığıyla kullanılsın, stil dilinin bir medya sorgusunun işleyişini olumsuz etkileyebilecek önemli bir 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 bir öncekini geçersiz kılar (veya önceliklidir).

Yukarıda sahip olduğumuz varsayılan medya sorgu kodu akıllı telefonları (450 piksel genişliğinde ve altı) hedefler, bu nedenle tabletler için farklı bir arka plan ayarlamak isterseniz, aşağıdaki kodu önceden var olan CSS dosyanıza eklemeniz gerektiğini düşünebilirsiniz.

Tablet Ortamı Sorgu Örneği


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

Tek sorun, öncelik sıralaması nedeniyle tabletlerin arka plan renginin kırmızı olması ve akıllı telefonların da artık kırmızı arka plan renginin olması çünkü 450 piksel ve altı 800 pikselin altında.

Bu küçük sorunu çözmenin bir yolu, akıllı telefonlar için olanlardan önce tabletler için medya sorgusunu eklemek olacaktır; ikincisi öncekini 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.

Ancak, ö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şlikte (aralık) bir ortam sorgusu oluşturabildiği, aralık belirtimi olarak bilinen ortam sorgularının bir özelliğidir.

Aralık Örneği ile Tablet Ortam Sorgusu


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

Yukarıdaki örnekte, medya sorgularının bir stil sayfasına yerleştirilmesi, tabletler ve akıllı telefonlar için tasarım iki ayrı genişlik koleksiyonunu hedeflediğinden alakasız hale gelir.

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 etiketinde medya sorguları kullanmayı içerir, bu nedenle akıllı telefonlar, tabletler ve bilgisayarlar için stil tercihlerini içeren tek bir büyük stil sayfasına sahip olmak yerine, üç ayrı CSS dosyası kullanabilir ve medya sorgularınızı etikette oluşturabilirsiniz.

Etiket, CSS stilini harici bir stil sayfasından içe aktarmak için kullanılan bir HTML öğesidir. Bu etiket, CSS'deki bir medya sorgusu ile aynı şekilde çalışan bir medya özelliğine sahiptir.




href='tablet.css'>


Yukarıdaki kod, HTML dosyanızın etiketine yerleştirilmelidir. Şimdi tek yapmanız gereken, main.css, tablet.css ve smartphone.css dosya adlarına sahip üç ayrı CSS dosyası oluşturmak ve ardından her cihaz için istediğiniz özel tasarımı oluşturmak.

Ana dosyadaki stil 800 pikselden büyük tüm ekranlar için geçerli olacak, tablet dosyasındaki stil 450 piksel ile 801 piksel arasındaki tüm ekranlar için geçerli olacak ve akıllı telefon dosyasındaki stil aşağıdaki tüm ekranlar için geçerli olacak 451 piksel.

bitcoin madenciliğinden ne kadar para kazanabilirsin

Artık Duyarlı Tasarımlar Oluşturmak için Araçlara Sahipsiniz

Bu makalenin sonuna kadar geldiyseniz, duyarlı tasarımın ne olduğunu ve neden yararlı olduğunu öğrenebildiniz. Artık ortam sorgularını CSS ve HTML dosyalarında 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.

İmaj Kredisi: Negatif Alan/ Pexels

Paylaş Paylaş Cıvıldamak E-posta CSS'de Arka Plan Resmi Nasıl Ayarlanır

CSS, web sayfalarını şekillendirmek için güçlü bir araçtır. Arka plan görüntüsünü nasıl yerleştireceğinizi öğrenmek size birçok CSS temel bilgisi öğretir.

Sonrakini Oku İlgili konular
  • Programlama
  • Web Geliştirme
  • Web Tasarım
  • CSS
Yazar hakkında Kadeisha Kean(21 Makale Yayınlandı)

Kadeisha Kean, Full-Stack Yazılım Geliştirici ve Teknik/Teknoloji Yazarıdır. En karmaşık teknolojik kavramların bazılarını basitleştirme konusunda belirgin bir yeteneğe sahiptir; herhangi bir teknoloji acemi tarafından kolayca anlaşılabilecek malzeme üretmek. Yazmak, ilginç yazılımlar geliştirmek ve dünyayı gezmek (belgeseller aracılığıyla) konusunda tutkulu.

Kadeisha Kean'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın