Özet - Duyarlı kart

CSS kursu · Orta seviye · Ders 51/98

Media query ile duyarlı kart düzeni kurarsın.

Özet - Duyarlı kart

Bu grupta duyarlı tasarımın temellerini gördün: <meta name="viewport"> ile görünüm alanını ayarlamak, @media bloklarıyla ekran genişliğine göre stilleri değiştirmek, clamp() ile duyarlı yazı boyutu ve max-width ile duyarlı görseller.

Şimdi hepsini bir araya getireceğiz: bir kart bileşenini telefonda tek sütun, masaüstünde yan yana yapacağız.

Uygulama Duyarlı kart: görsel ve başlık

İki bildirim ekle: img için max-width: 100% ve height: auto; h2 için font-size: clamp(1.25rem, 3vw, 1.75rem).

Örnek çözümü göster

.card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* img ve h2 için duyarlı bildirimler ekle */
img {
  max-width: 100%;
  height: auto;
}

h2 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
}

Duyarlı tasarım ipuçları

Duyarlı tasarım pratiğinde birkaç şeyi aklında tut:

Mobile-first yaz: önce telefon, sonra min-width ile genişlet.
Az breakpoint: içeriğe göre belirle, cihaz sayısına göre değil.
clamp()'ı yazılarda kullan, düzeni yine @media ile değiştir.
Görsellere her zaman max-width: 100% ve height: auto.

Uygulama Tam bir duyarlı hero bölümü

İki şey ekle: .hero h1 için font-size: clamp(2rem, 6vw, 4rem); ve bir @media (min-width: 768px) bloğu içinde .hero için padding: 4rem 2rem.

Örnek çözümü göster

.hero {
  padding: 2rem 1rem;
  text-align: center;
}

/* .hero h1 için duyarlı yazı ve 768px üstünde padding */
.hero h1 {
  font-size: clamp(2rem, 6vw, 4rem);
}

@media (min-width: 768px) {
  .hero {
    padding: 4rem 2rem;
  }
}

Kendini test et

Hangi araç hangi iş için?
- Yazıyı sınırlarıyla akışkan yapmak için clamp() kullan
- Duyarlı yazı boyutu için @media (max-width) kullan
- Ekran genişliği kırılımları için clamp() kullan
- Görünüm alanını ayarlamak için img { max-width: 100% } kullan
Cevabı göster

Yazıyı sınırlarıyla akışkan yapmak için clamp() kullan — Doğru. clamp(min, vw, max) yazıyı sınırlar arasında akışkan yapar.

Duyarlı başlık bildirimini tamamla

h1 {
  font-size: clamp(1.5rem, ____, 2.5rem);
}

Cevabı göster

h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

Özet - Duyarlı kart