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

Telif Hakkı:
Problemi Şikayet Et!HAKKIMDA
Yazılım Uzmanlığı konusunda 11 yılı aşkın süredir Türkiye'de Cumhurbaşkanlığı olmak üzere Kurumlara ve Tüzel kişilere; Yön verme, Yücelik Sağlama ve Büyüme gereksinimlerinden doğan Yazılım ihtiyaclarına çözümler sunmaktayım.
<html>
<body>
<h5>
Yazılım
&
Teknoloji
</h5>
<p>
Dünyasına
Hoş Geldiniz.
</p>
</body>
</html>
Son Eklenen Konular
Nginx Nedir, Nasıl Çalışır, Kurulumu, Hata ve Çözümü
03 Haziran, 2022
Web Site | Web Tasarım | Web Yazılım
27 Nisan, 2022
Html URL ASCII Karakter kodları
04 Mart, 2022
Jquery Alert, Sweet alert, Dialog Kullanımı
03 Mart, 2022
Doğal Seo Çalışması Nasıl Yapılır?
19 Şubat, 2022
En Çok Okunanlar
Google api key nasıl alınır?
26 Eylül, 2013
Youtube Video'sunu Gif Yapma Gif'e Çevirme
17 Ağustos, 2013
linux çeşitleri nelerdir?
13 Ağustos, 2013
Php ile bot nasıl yapılır?
22 Eylül, 2013
Ajax ile sayfa yenilenmeden resim yükleme nasıl yapılır?
04 Ekim, 2013
İlgili İçerikler
-
04 Mart, 2022 926
Html URL ASCII Karakter kodları
-
28 Ekim, 2015 4359
cross-browser nedir? cross-browser nasıl kullanılır?
-
26 Ekim, 2013 3371
Siteme video meta tagları nasıl eklerim?