Responsive css ile mobil site nasıl yapılır?

Merhaba arkadaşlar umarım notlarım ilgilenen arkadaşlara faydalı olur. Bu dersimizde css3'ün @media elemanını işleyerek responsive site yapma mantığını göreceğiz. Media günümüzde artık bir çok sitede kullanılmaya başlayan kullanışlı bir eleman.

Şimdi mantığından bahsetmek gerekirse ezber bozma anlamında bir internet sitesi html dökümanları ile çalışan css dökümanları ile de html yapımızda bulunan şablonu mimari özellikler katarak şekillendirme ve güzelleştirmeye yarayan özelliklerdir.

Günümüz teknolojisi ile farklı platformların katılımlarıyla her platform gelişmeye başladı bu html ve css dökümanlarında da gerçekleşti. html5 ve css3 olarak gerçekleştirmiş oldukları evrim ile tüm tarayıcı platformlarında var olmak istemeleri sayesinde bizlere de ekstra özellikler sundular.

html5 ve css3 sayesinde tüm tarayıcılar ve mobilde dahil olmak üzere dijital projelerimizin sunumunu gerçekleştirebilmemizi sağladı. sitemizi tüm platformlarda eşit olarak görüntülenebilmesi için html5 ve css3 dökümanlarının responsive özelliğini kullanmamız gerekiyor.

Responsive özelliğini kullanırken html5'te ve css3'te belirtmemiz gereken kodlar olacak ve bu kodlar sayesinde internet projemizin tüm platformlarda çalışmasını sağlayacağız.

Öncelikle html5 kodlarımız da aşarıda ki gibi head arasında viewport özelliği ile device ve scale özelliklerini belirtmemiz gerekiyor

örnek 2 koduda belirtebilirsiniz.

Css3 te ise media sorgu yöntemi ile yazmış olduğumuz aynı css dosyasında mobil özelliklerini belirterek sitemizi responsive yapıya büründürebiliriz. örnek olarak

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

 örnekte belirttiğimiz sorguda media özelliği ekranı ve tarayıcıyı baz alarak media max genişliğinin 479px olması dahilinde htmlde bulunan bir yapımızın css özelliğini burada belirtebiliriz. 479px mobil ekran boyutudur.

Şimdi birlikte örnek bir uygulama yapalım ve konuyu daha geniş bir kapsamda uygulamalı olarak mantığını anlayalım.

html dosyamızda body etiketleri arasına responsive adında bir div oluşturalım ve css dosyamızda responsive clasımızı 4 renk ile ekran boyutuna göre kontrol edelim.

@media screen and (max-width:479px){ .responsive{background:black;} }
@media only screen and (min-width: 480px) and (max-width: 767px){ .responsive{background:red; }
@media only screen and (min-width: 768px) and (max-width: 1023px) { .responsive{background:yellow; }
@media only screen and (min-width:1024px){ .responsive{background:orange; }

Örnekte black(siyah) Mobil ekran boyutundadır. red(kırmızı) mobile ile tablet arasındaki ekran boyutundadır. yellow(sarı) tablet boyutunda ve orange (turuncu) ise deskop boyutundadır.

@media sorgumuz sadece div gibi yapılarda değil resimlerde de kullanımı vardır. Mantığı şudur bilgisayarda 1920x780px resminizi mobilde bu boyutta gösteremeyiz. mobilde bu resmi küçültmek gerekiyor bunu css html olarak değilde aynı resmi 2 boyutta servera yükleyip mobilden girince küçük resmi gösterirsek serverı ve html yorumlayıcısını yormamış olur ve sitemizin daha hızlı açılmasını sağlamış oluruz.

Hemen örnek ile mantığını anlayalım.

	img media="only screen and (min-width: 1200px)" src="resimbuyukpng"

	img media="only screen and (min-width: 768px)" src="resimtabletpng"

	img media="only screen and (max-width: 480px)" src="resimmobilpng"

	img media="only screen and (min-width: 0px)" src="resimmobilpng"

 Gördüğünüz gibi ekran özelliklerine göre media sorgusu ile aynı css dosyamızda koşul belirterek responsive işlemini gerçekleştirebiliyoruz