Tasarımımı responsive hale getirmek istiyorum

Tasarımımı responsive hale getirmek istiyorum
57

Nedir bu responsive ya? sen ondan bahset dediğinizi duyar gibiyim o yüzden olaya hızlı bir giriş yapmak istiyorum.  Responsive’in kelime anlamı nedir diye baktığımızda karşımıza duyarlı kelimesi çıkıyor yani çözünürlüğe göre yer değiştirme işlemi.

Peki ben tasarımımı responsive hale getirmek istiyorum o nasıl olacak?

Dert etme! İşlem çok basit..

İlk Adım: Head etiketleri arasına ekleyeceğimiz viewport meta etiketiyle görünümü genişliğini kullanılan alete göre ayarlatalım.

<meta name="viewport" content="width=device-width, initial-scale=1">

” width=device-width “  sayfanın aletin genişliğine göre yeniden boyutlanmasını sağlar.

” initial-scale=1 “ ayfanın tam ve yatay genişliği kullanmasına olanak sağlar, cihaz yatay pozisyona alındığında yeniden boyutlanır.

İkinci Adım: @media etiketiyle çözünürlüğü belirliyoruz ve içerisine eklediğimiz css kodları sadece o çözünürlükte çalışıyor.

Örn. Bu @media etiketinin içerisine yazacağımız css kodları sadece genişiği 960px’den küçük cihazlarda çalışacak.

@media only screen and (max-width: 960px) {
// css içeriği bu alana
}

Standart Responsive tasarım ekran çözünürlükleri

 /* Smartphones (portrait and landscape) ----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 /* CSS KODLARI BURAYA */
 }
/* Smartphones (landscape) ----------- */
 @media only screen and (min-width : 321px) {
 /* CSS KODLARI BURAYA */
 }
/* Smartphones (portrait) ----------- */
 @media only screen and (max-width : 320px) {
 /* CSS KODLARI BURAYA */
 }
/* iPads (portrait and landscape) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
 /* CSS KODLARI BURAYA */
 }
/* iPads (landscape) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
 /* CSS KODLARI BURAYA */
 }
/* iPads (portrait) ----------- */
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
 /* CSS KODLARI BURAYA */
 }
 /* Desktops and laptops ----------- */
 @media only screen and (min-width : 1224px) {
/* CSS KODLARI BURAYA */
 }
 /* Large screens ----------- */
 @media only screen and (min-width : 1824px) {
 /* CSS KODLARI BURAYA */
 }
/* iPhone 5 (portrait & landscape)----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
 /* CSS KODLARI BURAYA */
 }
/* iPhone 5 (landscape)----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
 /* CSS KODLARI BURAYA */
 }
/* iPhone 5 (portrait)----------- */
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
 /* CSS KODLARI BURAYA */
 }

responsive-big

Son Adım: Tüm bu çözünürlük kodlarını kullanmanıza gerek yok örnek çoğalsın diye standart çözünürlükleri ekledim kendinizde bunları değiştirebilirsiniz. Son olarakta css kodlarınıza bu şekilde ekleme yaparsanız tasarımınızın responsive olacaktır.

[bilgi]Çözünürlükleri test etmek için chrome eklentisini kurabilirsiniz.[/bilgi]

Yorum Yap