Responsive Tasarım Nedir?

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 61 / 76.

Web tasarımında, duyarlı tasarım (responsive design), masaüstü bilgisayar monitörlerinden cep telefonlarına kadar geniş bir cihaz yelpazesinde uyum sağlayan ve en iyi görüntüleme deneyimini sunan web sayfaları oluşturmayı amaçlayan bir yaklaşımdır. Duyarlı bir web sitesi; düzenini, içeriğini ve işlevselliğini, görüntülendiği cihazın ekran boyutuna, çözünürlüğüne ve yönüne göre otomatik olarak ayarlar. Duyarlı tasarımın amacı, kullanıcıların hangi cihazı kullandıklarından bağımsız olarak web sitesine kolayca erişebilmelerini ve etkileşim kurabilmelerini sağlamaktır.

Duyarlı tasarım, aşağıdakiler de dahil olmak üzere bir dizi tekniğin birleşimiyle elde edilir:

Esnek ızgaralar ve düzenler: Farklı ekran boyutlarına uyum sağlayabilen düzenler oluşturmak için CSS grid veya Flexbox kullanmak.

Esnek görseller ve medya: Görsellerin ve diğer medyaların düzenle orantılı olarak ölçeklenmesini sağlamak.

Medya sorguları (Media queries): Ekran genişliği, yüksekliği ve yönlendirme gibi cihaz özelliklerine bağlı olarak farklı CSS stilleri uygulamak.

Daha fazla insan web'de gezinmek için mobil cihazları kullandıkça, web sitelerini kullanımı kolay hale getirmek için duyarlı tasarım esastır. Sitenizin her cihazda iyi görünmesini ve düzgün çalışmasını sağlayarak kullanıcılara sorunsuz ve tutarlı bir deneyim sunar.

Görev

Kolay

Size bir başlık (<h1>), bir paragraf (<p>) ve iki resim (<img>) içeren bir HTML belgesi verilmiştir. Göreviniz, öğeleri duyarlı (responsive) hale getirmek ve sabit yükseklik ile otomatik yükseklik arasındaki farkı net bir şekilde göstermek için bazı temel CSS'ler eklemektir. Aşağıdaki adımları izleyin:

<h1> öğesini hedefleyen bir CSS kuralı yazın. font-size değerini 5vw olarak ayarlayın. Bu, başlığın yazı tipi boyutunu görünüm alanı genişliğine (viewport width) göre duyarlı hale getirecektir.
<p> öğesini hedefleyen bir CSS kuralı yazın. font-size değerini 3vw olarak ayarlayın. Bu, paragrafın yazı tipi boyutunu görünüm alanı genişliğine göre duyarlı hale getirecektir.
.fixed-height sınıfını hedefleyen bir CSS kuralı yazın. width değerini 100% ve height değerini 150px olarak ayarlayın. Bu, sabit bir yükseklik zorlayarak bozulmuş bir görüntü oluşturacaktır.
.auto-height sınıfını hedefleyen bir CSS kuralı yazın. width değerini 100% ve height değerini auto olarak ayarlayın. Bu, görüntünün en boy oranını koruyarak orantılı bir şekilde ölçeklenmesini sağlayacaktır.
Konteynerler (.container) için width değerini 300px, border değerini 2px solid #ccc, margin değerini 20px ve padding değerini 10px yapan CSS kuralları yazın.

Kopya kağıdı

Duyarlı tasarım (responsive design), esnek düzenler, ölçeklenebilir medya ve medya sorguları aracılığıyla farklı cihazlara ve ekran boyutlarına uyum sağlayan web sayfaları oluşturur.

Duyarlı tasarım için temel teknikler:

Esnek ızgaralar ve düzenler: CSS Grid veya Flexbox kullanımı
Esnek görseller ve medya: Düzenle orantılı olarak ölçeklendirme
Medya sorguları: Cihaz özelliklerine göre farklı stiller uygulama

Duyarlı tipografi için viewport birimlerini kullanın:

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

Görselleri uygun ölçeklendirme ile duyarlı hale getirin:

/* Sabit yükseklik - bozulmaya neden olur */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* Otomatik yükseklik - en boy oranını korur */
.auto-height {
  width: 100%;
  height: auto;
}

Kendin dene

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>