Duyarlı Tasarım (Responsive Design) Örneği

Duyarlı tasarım (Responsive Design) nedir, ne işe yarar sorularını bu makalede cevaplamaya çalışacağız.

Öncelik olarak kısaca "Responsive Nedir?", "Responsive Ne İşe Yarar"sorularına cevap verelim.

Responsive Nedir?

Dil karşılığı olarak duyarlı, hassas anlamlarına gelmektedir. Peki bunun web dünyasında karşılığı nedir dersek?
Bu soruya karşılık olarak bilgisayarda ziyaret ettiğiniz bir web sitesinin tablet, cep telefonu vs.. cihazlarda ekranının genişlik değerine uygun olarak davranmasıdır.

Responsive Ne İşe Yarar?

Örnek verecek olursak, bilgisayarda ziyaret ettiğiniz bir web sayfasının menü genişliği (980px) olarak varsayalım. Yeterince geniş olan bu menü, mobilden ziyaret edilince (telefon veya tablet) küçük ve açılır bir halde olduğu görebiliriz.
Peki bu ekran genişlikleri gibi değerleri css ile nasıl algılarız? İşte bu sorunun cevabını da birkaç örnek ile açıklamaya çalışalım.
Normal geniş ekranlarda genişliği 1000px olan kapsul değerimizi, tablet gibi biraz da küçük ekranlara göre daha da küçük olarak belirtelim.
Normal Ekranlara Göre
.kapsul{width:1000px;}

Tablet Ekranlarına Göre
@media (max-width:767px)
{
   .kapsul{width:600px;}
}

Yorumlar

Henüz hiçbir yorum yazılmamış. İlk yorumu siz yapın.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum