Responsive css için hangi çözünürlükler gerekiyor?

29-04-2015, 13:16:52

Arkadailar wordpress tema kodladım, şimdi responsive css yapıyorum. Sormak istediğim, bilinen tüm çözünürlüklerin tek tek css sini hazırlamam mı gerekiyor yoksa belli başlı kalıplaşmış çözünürlükler mi var? Mobil ve tabletler her geçen gün artıyor, hepsine ayrı ayrı css hazırlanacağını düşünemiyorum.

29-04-2015, 13:26:15

#2

Yesil SEO

Yeşil SEO İnt. Hiz.

sınırı yok hocam. istediğin kadar yapabilirsin.

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

29-04-2015, 13:30:02

#3

kiNDar

staticiation adlı üyeden alıntı: mesajı görüntüle

sınırı yok hocam. istediğin kadar yapabilirsin.

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

Muhtemelen öyledirde, ben her çözünürlük için mecbur yapmamız mı gerekiyor yoksa belli başlı çözünürlükleri kullansak yeterli gelirmi onu merak ettim. Öneriniz için teşekkür ederim hocam.

29-04-2015, 13:30:42

#4

Haymac

biraz araştırdım, sanırım bunlar yeterli oluyor.

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

29-04-2015, 13:40:06

#5

~Aykut

Bootstrap'ın kullandığı sistem böyle.

768 den küçükleri ise 100% ile yapmanız yeterli

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

29-04-2015, 14:00:31

#6

kiNDar

Haymac adlı üyeden alıntı: mesajı görüntüle

biraz araştırdım, sanırım bunlar yeterli oluyor.

/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}

~Aykut adlı üyeden alıntı: mesajı görüntüle

Bootstrap'ın kullandığı sistem böyle.

768 den küçükleri ise 100% ile yapmanız yeterli

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Teşekkür ederim arkadaşlar şimdi aradığım cevabı buldum.

29-04-2015, 16:37:29

#7

EkolWeb

min-width max-width ile belli aralıklara bölerek çalışırsanız daha faydalı olur yani sadece min sadece max yerine iki tipide belirtin, ölçü aralıkları için bootstrap'in dökümantasyonunu inceleyebilirsiniz. Bazen tasarımdan dolayı çok enteresan bir durum çıkarsa standart kalıpların dışında ek aralıklar yazarak devam edersiniz.

İyi çalışmalar.

29-04-2015, 17:34:17

#8

kiNDar

EkolWeb adlı üyeden alıntı: mesajı görüntüle

min-width max-width ile belli aralıklara bölerek çalışırsanız daha faydalı olur yani sadece min sadece max yerine iki tipide belirtin, ölçü aralıkları için bootstrap'in dökümantasyonunu inceleyebilirsiniz. Bazen tasarımdan dolayı çok enteresan bir durum çıkarsa standart kalıpların dışında ek aralıklar yazarak devam edersiniz.

İyi çalışmalar.

Evet hocam bazen böyle durumlar oluyor, aralık vermek gerekebiliyor. Bu gibi durumlarda kullanılması faydalı oluyor. Teşekkür ederim hocam bilgi için.