Duyarlı Tasarım Nedir?

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 61 / 76.

Web tasarımında duyarlı tasarım, masaüstü bilgisayar monitörlerinden cep telefonlarına kadar çok çeşitli cihazlarda 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ı, kullandıkları cihazdan bağımsız olarak kullanıcıların web sitesine kolayca erişebilmesini ve siteyle etkileşim kurabilmesini 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ı: Ekran genişliği, yüksekliği ve yönü gibi cihazın özelliklerine göre farklı CSS stilleri uygulama.

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 görsel (<img>) içeren bir HTML belgesi verilmiştir. Göreviniz, öğeleri duyarlı hâle getirmek ve sabit yükseklik ile otomatik yükseklik arasındaki farkı açıkça göstermek için temel CSS eklemektir. Aşağıdaki adımları izleyin:

<h1> öğesini hedefleyen bir CSS kuralı yazın. Yazı tipi boyutunu 5vw olarak ayarlayın. Bu, başlığın yazı tipi boyutunu görünüm alanının genişliğine duyarlı hâle getirir.
<p> öğesini hedefleyen bir CSS kuralı yazın. Yazı tipi boyutunu 3vw olarak ayarlayın. Bu, paragrafın yazı tipi boyutunu görünüm alanının genişliğine duyarlı hâle getirir.
.fixed-height sınıfını hedefleyen bir CSS kuralı yazın. Genişliği 100% ve yüksekliği 150px olarak ayarlayın. Bu, sabit bir yüksekliği zorlayarak bozulmuş bir görsel oluşturur.
.auto-height sınıfını hedefleyen bir CSS kuralı yazın. Genişliği 100% ve yüksekliği auto olarak ayarlayın. Bu, en-boy oranını korurken görselin orantılı olarak ölçeklenmesini sağlar.
Kapsayıcılar (.container) için genişliklerini 300px, kenarlıklarını 2px solid #ccc, kenar boşluklarını 20px ve iç dolgularını 10px olarak ayarlayan CSS kuralları yazın.

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>