Responsive Web Tasarım javaScript medya sorguları

Bu Makalede Gerçek ekran boyutlarını elde etmek ve bu değerlerin daha fazla kullanılması için JavaScript'teki medya sorgularının çalışma örneklerini göstereceğim.

Elektronik dünyadaki teknolojik gelişmelerin sonucu olarak hayatımızın ayrılmaz bir parçası haline gelen mobil cihazların kullanımı giderek yaygınlaşmış, buna bağlı olarak da web tasarımını tüm cihazlarla uyumlaştırma kaygısı ortaya çıkmıştır. Web tasarım siparişlerinde artan bir öneme ulaşan uyumluluk sorunu, yazılım ve tasarımda yenilik arayışına neden olarak web geliştiricilerini de bu konuda çözüm üretmeye zorlamıştır. Böylece yazılım ve tasarımda duyulan gereksinimler duyarlı (responsive) web tasarımı kavramını ortaya çıkartmıştır. Duyarlı tasarımın temel prensibi farklı cihazların ekran çözünürlüklerine uyum gösterecek esnek tasarımlar geliştirmektir.

Websitelerinizin tasarım ve kullanılabilirlik sorunlarının önemli bir kısmı çözünürlük ile ilgili problemlerden kaynaklanmaktadır.

Bir web geliştiricisinin en önemli görevlerinden biri, web sayfasının herhangi bir ekranın herhangi bir çözünürlüğünde doğru bir şekilde görüntülenmesini sağlamaktır. Ziyaretçiyi yatay kaydırma ve ölçeklemeyi kullanmaya zorlamayın.

CSS3 ile birlikte oldukca popüler olan Medya Sorguları'nı kullanarak cihaza ait bircok ozelligi ele alarak ilgili cihaza yonelik kodlar yazabilecegiz medya sorgularını kullanmaya alışkınız.

/* mobil telefon */
@media only screenand (max-width:320px) {
 
}
 
/* Tablet */
@media only screenand (min-width:768px) {
     
}
 
/* Bilgisayar ----------- */
@media only screenand (min-width:1200px) {
  
}

Yukarıdaki CSS kodu, sayfayı üç farklı cihazda stilize etmenizi sağlayacaktır

JavaScript'te Medya Sorgulaması nasıl kullanılır?

Cihazın ekran boyutunu öğrenmek için, medya istekleri pencerenin genişliğini kontrol eder. Bu durumda, cihazın genişliğine bakabilir ve kaynaklara yükleyebileceğiniz belirli bir boyutta olup olmadığını belirleyebilirsiniz.

ÖRNEK:

	if (screen.width >= 600) {
	
	//javascript kodları
}

veya alternatif olarak, daha uygun olan görünümün pencere içerik alanının genişliğini bakabiliriz.

if ( window.innerWidth < 900) {
	
	//javascript kodları

}

Yukarıdaki Fonksiyonlar çok iyi bir şekilde çalışacaktır. Kesme noktası olarak misal 768px küçük ekranlar hedeflendiyse sadece belirtilen ekranlarda çalışacaktır; fakat tarayıcı ekranlarını küçültüp büyüttüğünüzde işlem yapmayacaktır. Bu sorunun üstesinden gelmek için resize methodunu kullanacağız.

javaScript:

function test(){
		if(window.innerWidth < 800) {
	
	alert("merhaba");
  }
}
	

HTML:

<body onresize="test()">
 




Yada resize işlemini javascript'te fonksiyon şöyle çağrılmalı:

function test(){
		if(window.innerWidth < 800) {
	
	alert("merhaba");
  }
}
	
addEventListener("resize", test);

Medya sorguları CSS3'te tanıtıldı ve yanıt veren web tasarımı için temel bileşenlerden biridir. Medya sorguları, web sayfalarının tüm cihazlarda (masaüstü, dizüstü bilgisayar, tablet, telefon vb.) İyi görünmesini sağlamak için bir görünümün genişliğini ve yüksekliğini belirlemek için kullanılır. CSS3 medya sorgularını javascript kullanabiliyoruz ve tarayıcı yeniden boyutlandırmayı anlıyor.

Window.matchMedia() yöntemi, belirtilen CSS medya sorgu dizesinin sonuçlarını temsil eden bir MediaQueryList nesnesini döndürür.

MatchMedia() yönteminin değeri, CSS @ media kuralının min-height, min-width, orientation vb. Gibi ortam özelliklerinden herhangi biri olabilir .

sözdizimi

mql = window.matchMedia ( mediaQueryString )

MediaQueryList nesnenin iki özellikleri ve iki yöntem vardır:

CSS medya sorgunuz varsa:

@media screen and (max-width: 765px){

 /* CSS kodları burada*/

}

JavaScript’te aynı medya sorgusunu tespit etmek için şu kodları yazarsınız:

	
var mql = window.matchMedia("screen and (min-width: 800px)")

if (mql.matches){ // medya sorguları eşleşiyorsa true döner

 alert("Pencere 800px veya daha geniş")
}
else{

 // değilse diğer javaScript kodları

}

Diğer bir kullanım şöyle olur.

if (window.matchMedia("(min-width: 400px)").matches) {

  /* viewport en az 400 piksel genişliğinde

  ise jacvascript kodları */

} else {

  /* viewport 400 pikselden daha az ise 
  jazascript kodları */
}

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

786

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.