Hangi Boyutlara Göre Responsive Yapıyorsunuz ?

Şimdi ben kullanıcının ekran boyutunu tahmin edemeyeceğimden dolayı onun hangi çözünürlüğü kullandığını nereden bileceğim ve özellikle hangi boyutlar için @media query yazacağım, bir laptopun ekran boyutları nedir ve bir notebook'un ve bir tabletin ve bir mobil cihazların, bir Iphone'nın.Siz hangi boyutlar için yazıyorsunuz ? Her ekranda aynı görüntüyü nasıl sağlıyorsunuz ? Bi sürü ekran boyutu var hepsi için yazıyor musunuz ?

Çok merak ettim, çokta hevesliyim

bootstrap gibi bir framework kullanırsan standardı yakalamış olursun onun haricinde

http://www.zingdesign.com/responsive...n-cheatsheet1/

Hocam Bootstrap bilgim hiç yok ve her proje için bootstrap yazmak biraz ağır olur yani dosya boyutu bakımından her site için kullanılmayacağından dolayı saf css ile yapmak istiyorum, ihtiyacım olan tek şey boyutlar

Aslında yükselen bir framework olduğu için bootstrap kullanan siteler sayesinde bootstrap dosyaları cache'de yer ediyor, yani ağır falan durumu yok o kadar da artı olarak çok da kolaylaştırılmış.
Çözünürlük istiyorum diyorsan da verdiğim linke bak.

Merhaba hocam;

http://spirelightmedia.com/resources...tion-reference

adresindeki listede tüm boyutlar var bunlar içinden belli başlı olanları referans almalısınız her birine göre media query yazılmaz zaten. Ama onlar dışındakilerde de güzel gözüksün istiyorsanız da aşağıdaki linkteki yazıyı incelemenizde fayda olacaktır:

http://webdesignerwall.com/tutorials...ponsive-design

Arkadaşım Reponsive hakkında biraz bilgi vereyim sana. Bildiğin gibi farklı ekran boyutlarına göre boyutlandırma anlamına gelir. Aslında bu konu için bir çok farklı faktör vardır. Bunlardan birisi siteyi komple %100'e göre ayarlarsan zaten her ekrana göre reponsive etmiş olursun otomatik olarak Bunun yanı sıra mevcut ekran boyutları bulunmaktadır.

Samsung Galaxy S3 & İphone 4S Bu telefonların ekran boyutları eni 300px'dir. Sen zaten kodlamada 300px eni olan ekranlarda sitemi böyle göster diye kodlarsın. Yada bunun gibi bir çok faktör bulunmaktadır. Her ekrana göre tek tek kodlarsın. Tabiki büyük sitelerde böyle yapmak gerekir.

Yalnız belli başlı 5-6 boyut farkı vardır. Telefonlar için genellikle 300-400Px ve altı telefonlarda bunu kullan dersin.

İpad gibi aletler içinse yanılmıyorsam 600 700px gibi bir en kullanılmaktadır.

1024px ekranlar için,

1360lar için vs..

Umarım az uz bir bilgi verebilmişimdir. Bu esasında reponsive edilecek sisteme göre değişiklik gösterir Klasik bir blog teması ise siteyi %100'e uyarlar geçersin ve tüm sistemlerde oturur geçer. Sadece telefonlar için farklı bir kodlama yazarsın. Büyük siteler içinse her alete göre farklı bir css kodlarsın. Umarım anlatabilmişimdir.

İyi forumlar..

konu hort olacak ama banada lazım oldu burada bulamadım kodları aradım taradım buldum başka işine yarayan olursa kullanabilir

/* 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 */
}

ben genelde bootstap'in media querylerini kullanıyorum ekstra birkaç media query daha bunlar max-width:1200 , min-width:1200 , min-width:768 and max-width:980 max-width:767, max-width:480px

Merhaba hocam,

Her yiğidin yoğurt yemesi farklıdır. Bende aşağıda ki gibi kullanıyorum.

@media only screen and (max-width: 320px) {}
@media only screen and (min-width: 320px) and (max-width: 480px) {}
@media only screen and (min-width: 480px) and (max-width: 768px) {}
@media only screen and (min-width: 768px) and (max-width: 1024px) {}