- Katılım
- 19 Ocak 2024
- Mesajlar
- 159
- Tepkime puanı
- 10
- Puanları
- 18
- Ödüller
- 5
CSS ile Responsive (Duyarlı) Tasarım Teknikleri
Responsive tasarım, web sitelerinin tüm cihazlarda (masaüstü, tablet, mobil) düzgün görünmesini sağlamak için tasarlanmıştır. CSS kullanarak duyarlı bir tasarım oluşturmak için çeşitli teknikler ve araçlar kullanılabilir.
Media Query Kullanımı
Media query, ekran boyutuna göre farklı stiller uygulamak için kullanılan güçlü bir CSS özelliğidir.
CSS:
body {
font-family: Arial, sans-serif;
margin: 0;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
@media (max-width: 768px) {
.container {
width: 100%;
padding: 10px;
}
}HTML Yapısı:
HTML:
<div class="container">
<h1>Responsive Tasarım</h1>
<p>Bu tasarım, farklı ekran boyutlarına göre değişiklik gösterir.</p>
</div>Yüzdelik Değerlerle Tasarım
Sabit genişlikler yerine yüzdelik değerler kullanarak esnek bir tasarım oluşturabilirsiniz.
CSS:
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
width: 48%;
margin-bottom: 20px;
background-color: #f4f4f4;
padding: 20px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.flex-item {
width: 100%;
}
}HTML Yapısı:
HTML:
<div class="flex-container">
<div class="flex-item">Öğe 1</div>
<div class="flex-item">Öğe 2</div>
<div class="flex-item">Öğe 3</div>
<div class="flex-item">Öğe 4</div>
</div>Viewport Meta Tagı</H2>
Responsive tasarım için HTML'de `meta` etiketi kullanmak gerekir.
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Kullanım Alanları
- Mobil uyumlu siteler
- Çok cihazlı projeler
- Modern web standartlarına uygun tasarımlar
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
