Responsive yani duyarlı web tasarım, tüm cihazlarda düzgün görünen web siteleri yapmaya yarar. Bu tasarımlar farklı ekran boyutuna ve pencerelere göre otomatik boyutlandırılacaktır.
Responsive Web Tasarım Nedir?
Responsive Web Tasarımı, bir web sitesini tüm cihazlarda (masaüstü bilgisayarlar, tabletler ve telefonlar) iyi görünmesini sağlamak amacıyla otomatik olarak yeniden boyutlandırmak, gizlemek, küçültmek veya büyütmek için HTML ve CSS kullanmaktır.
Viewport Ayarlamak
Responsive bir web sitesi oluşturmak için aşağıdaki <meta> etiketini bütün sayfalara eklemek gereklidir.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Yukarıdaki etiket sayfaların görünüm penceresini ayarlayacak, tarayıcıya sayfa boyutlarının ölçeklenmesinin nasıl olacağını söyleyecektir. Aşağıdaki görselde meta etiketli kullanılan ve kullanılmayan sayfaların genel görünümü gösterilmiştir.
Responsive Resimler
Responsive resimler, ilgili web sitesinin açıldığı cihaza göre ölçeklenen görsellerdir.
width Özelliğini Kullanma
CSS width özelliği 100% olarak ayarlanırsa görsel responsive olacak ve ölçek büyütülecek ve küçültülecektir:
<img src="logo.jpg" style="width:100%;">Yukarıdaki kod her durumda işe yaramayabilir. Resim küçük ise ve ölçekleme normalden büyük çıkarsa görsel kaliteli görünmeyecektir. Bunun yerine max-width kullanmak daha doğru olacaktır.
<img src="logo.jpg" style="max-width:100%;height:auto;">Tarayıcı Genişliğine Göre Farklı Resimler Gösterme
HTML’de kullanılan <picture> etiketi farklı boyutlar için farklı resimler tanımlamaya olanak sağlar.
Aşağıdaki örneği kendinize göre uyarlayıp bir kaç resim kullanarak test edebilirsiniz.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source srcset="kucukresim.jpg" media="(max-width: 600px)">
<source srcset="ortaresim.jpg" media="(max-width: 1500px)">
<source srcset="anaresim.jpg">
<img src="ortaresim.jpg" alt="Değişen Resim" style="width:auto;">
</picture>
</body>
</html>Responsive Yazı Boyutları
Metin boyutu, “viewport width” anlamına gelen “vw” ile ayarlanabilir.
Bu şekilde metin boyutu tarayıcı penceresinin boyutuna uygun olacaktır:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw;">Responsive Yazı</h1>
<p style="font-size:5vw;">Bu yazıların nasıl değiştiğini görmek için tarayıcı pencerenizin boyutunu değiştirin.</p>
<p style="font-size:5vw;">Bu yazıların nasıl değiştiğini görmek için tarayıcı pencerenizin boyutunu değiştirin.</p>
<p>Bu yazıların nasıl değiştiğini görmek için tarayıcı pencerenizin boyutunu değiştirin.</p>
</body>
</html>
NOT : Viewport, tarayıcı penceresinin boyutudur. 1vw = görünüm genişliğinin %1’i. Görüntü alanı 50 cm genişliğindeyse 1vw 0,5 cm’dir.
Boyutlandırma İçin Media
Metin ve görselleri yeniden boyutlandırmanın yanı sıra duyarlı web sayfalarında media kullanılması da yaygındır. Media sorgularıyla farklı tarayıcı boyutları için tamamen farklı stiller tanımlayabilirsiniz.
Örnek: Aşağıdaki üç div öğesinin büyük ekranlarda yatay, küçük ekranlarda dikey olarak görünecektir. Bu kodun nasıl çalıştığını görmek için tarayıcı penceresini yeniden boyutlandırmanız gerekmektedir.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.left {
background-color: #2196F3;
padding: 20px;
float: left;
width: 20%;
}
.main {
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 60%;
}
.right {
background-color: #04AA6D;
padding: 20px;
float: left;
width: 20%;
}
/* 800px'den sonra çalışacak kod */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%;
}
}
</style>
</head>
<body>
<div class="left">
<p>Sol Menü</p>
</div>
<div class="main">
<p>Orta İçerik</p>
</div>
<div class="right">
<p>Sağ Menü</p>
</div>
</body>
</html>
Kodun normal çalışma şekli yukarıdaki gibidir. Kodu çalıştırdıktan sonra tarayıcı penceresi boyutunu yavaş yavaş küçültüp sonucu görebilirsiniz.
Responsive Web Sitesi Tam Örnek
Aşağıdaki örneği içeren bir HTML şablonu oluşturarak ekranı yavaş yavaş küçültün. Bu bölümde anlatılmak istenen bütün içerik aşağıdaki örnektedir.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.menu {
float: left;
width: 20%;
text-align: center;
}
.menu a {
background-color: #e5e5e5;
padding: 8px;
margin-top: 7px;
display: block;
width: 100%;
color: black;
}
.main {
float: left;
width: 60%;
padding: 0 20px;
}
.right {
background-color: #e5e5e5;
float: left;
width: 20%;
padding: 15px;
margin-top: 7px;
text-align: center;
}
@media only screen and (max-width: 620px) {
/* Mobil cihazlar için: */
.menu, .main, .right {
width: 100%;
}
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">
<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
<h1>TurkYazilimci.com</h1>
</div>
<div style="overflow:auto">
<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
<div class="main">
<h2>Deneme İçerik</h2>
<p>Deneme İçerikDeneme İçerikDeneme İçerikDeneme İçerikDeneme İçerikDeneme İçerikDeneme İçerikDeneme İçerikDeneme İçerikDeneme İçerikDeneme İçerik.</p>
</div>
<div class="right">
<h2>Hakkımızda</h2>
<p>Ücretsiz Yazılım Eğitimi.</p>
</div>
</div>
<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© turkyazilimci.com</div>
</body>
</html>
