Kategoriler
Genel

Responsive Web Tasarım İçin Ekran Boyutları

Responsive web tasarım yaparken dikkat edilmesi gereken ekran boyutları.

Bundan bir kaç sene öncesine kadar bir web tasarımı yaparken sadece pc ekranları için web tasarımı yapmak yeterli oluyordu. Ancak günümüz teknolojileriyle birlikte kullanıcılar bilgisayar ekranlarından ziyade akıllı telefon ve tabletleriyle web sitelerimizi ziyaret etmeye başladı. Bu yüzdendir ki artık tasarımlarımızı yaparken mobil ve tablet tasarımlarını da göz önünde bulundurmamız gerekiyor. Bunu yapmanın birden çok yolu olsa da benim en sevdiğim yöntem “Css ile Resposive(Duyarlı) Web Tasarım” dır. Bu yöntem sayesinde tek bir tasarım oluşturup kullanıcının ekran boyutuna göre tasarımlarımızı düzenleyebiliyoruz.

Bunu yaparken css de @media etiketi kullanımını bilmemiz gerekiyor. Bu yazıda nasıl kullanılacağını anlatmayacağım. Bilenler için sadece dikkat etmemiz gereken ekran boyutlarını paylaşıyorum. Projenizde ihtiyaç duyduğunuz zaman kullanabilirsiniz.

Not: Bunlar sadece benim kullanmış olduğum boyutlardır. Kesin bu boyutlar kullanılacak diye bir şart söz konusu değildir. Ancak bu boyutları şuana kadar her projemde kullandım ve herhangi bir sorun yaşamadım.

/* This width range is for smartphone (tr: akıllı telefonlar için) */
@media (max-width: 767px) { 
  .container { width: auto; }
  /* your other css codes */
}

/* This width range is for tablet (tr: tabletler için) */
@media (min-width: 768px) and (max-width: 991px) {
  .container { width: 730px; }
  /* your other css codes */
}

/* This width range is for medium pc screens (tr: orta ekranlı pc için) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container { width: 960px; }
  /* your other css codes */
}

/* This width range is for large pc screens (tr: geniş ekranlı pc için) */
@media (min-width: 1200px) {
  .container { width: 1100px; }
  /* your other css codes */
}

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir