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

Hoşgeldiniz, Ben İsmail Gültekin
Yazılım Mühendisi & Marka Direktörü

Yazılım Uzmanlığı ve Direktörlüğü konusunda 9 yılı aşkın süredir Türkiye'de Kurum 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.

Kurum olarak; Bankalar, Kanallar, Hastaneler, Belediyeler, Kamu ve bakanlıkların yanı sıra Tüzel kişilerde Sanatçılar, Yönetmenler, Belediye başkanları ve firma sahiplerine projelerinde hizmet veriyorum.

Yarışma organizasyon yazılımlarının algoritma geliştiricisi ve yaratıcısı olarak anılmaktayım. Aynı zamanda Türkiyenin en büyük Sosyal Sorumluluk Projelerinden biri olan Haydi el ele'ninde kurucusuyum

İletişim Bilgilerim

Faydalı bir projede görüşmek dileğiyle..

  • akinismailgultekin@gmail.com
  • İstanbul/Mecidiyeköy
  • 0212- 217 99 88
  • Ad/İsmail Gültekin
  • Doğum Tarihi/01, 12, 1988
  • website/www.ismailgultekin.com.tr

Mesaj Bırakın

Teşekkürler Mesajınız iletildi En kısa Zamanda geri dönüş yapacağım.

Bir problem oluştu lütfen tekrar deneyin

Tüm alanları eksiksiz Doldurun.

Özgeçmiş

Sonrakini Gör/Önceki Sayfa

Kurumlar

  • İstanbul Ajans Medya Marka Direktörü
    2014 - 2015

    İstanbul ajans medya Marka direktörü olarak web/kreatif projelerini Yönetmen Mustafa Önen önderliğinde Gerçekleştirdik.

  • İamistanbul.tv Yazılım şefi/Algoritma uzmanı
    2012 - 2014

    İamistanbul.tv videolu şehir portalı projesinde Ünlü Yönetmen Mustafa Mayadağ önderliğinde Yazılım/Algoritma uzmanı olarak görev aldım

  • BirNC Yazılım Şefi
    2011 - 2012

    birnc.com birNC yazılım firmasında yazılım şefliği görevini üstlendim

Becerilerim

  • Proje Kordinatörlüğü 96%

  • NodeJs 76%

  • HTML5/CSS3 92%

  • Php Codeigniter 98%

  • Social Ağ 87%

Sağladığım Hizmetler

  • Linux
  • Coding
  • Responsive
  • Planing
  • Codeigniter Web
  • NodeJS, Javascript, Jquery

Yaptığım Yarışmalar

  • Senaryo Yarışması
    2013 - 2014

    Jüriliğini Ömür gedik, Yüksel Aytuğ Hıncal uluç Gibi isimlerin Yaptığı senaryo yarışmasının Yazılım ve algoritmasını Üstlendim

  • Hip-Hop Yarışması
    2012 - 2013

    Türkiyede gençlerin popüler dinlediği müzik yarışması büyük bir yankı yapmıştı Yazılım ve algoritmasını üstlendim