HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
Mobil cihazların yaygın olarak kullanıldığı günümüzde, web sitelerinin farklı ekran boyutlarına uyumlu olması büyük bir önem taşımaktadır. Responsive web tasarım, kullanıcı deneyimini her türlü cihazda optimize etmeyi amaçlar. Bu makalede, responsive web tasarımında kullanılan bazı temel CSS tekniklerini ele alacağız.
1. Media Queries Kullanımı
Media queries, CSS'de belirli ekran boyutlarına veya özelliklerine özgü stil kuralları uygulamamıza olanak tanır. Örneğin, aşağıdaki kod bloğu, 768 piksel genişliğin altındaki ekranlara özel stil kuralları içerir:
CSS:
@media only screen and (max-width: 768px) {
/* Stil kuralları burada yer alır */
}2. Flexbox ve Grid Layout
Flexbox ve Grid, sayfa düzenini esnek ve ölçeklenebilir hale getirmek için kullanılır. Özellikle mobil cihazlarda, Flexbox ve Grid kullanarak sütunlar ve satırlar arasında dinamik bir düzen oluşturabilirsiniz.3. Görsel Öğelerin Yönetimi
Resimlerin ve diğer görsel öğelerin responsive olması önemlidir. max-width: 100% stilini kullanarak, görüntülerin ve diğer öğelerin genişliğini kontrollü bir şekilde yönetebilirsiniz.
CSS:
img {
max-width: 100%;
height: auto;
}4. Mobil Menüler ve Navigasyon
Küçük ekranlarda kullanıcı dostu bir gezinme deneyimi sağlamak için mobil menüler ve navigasyonlar kullanılabilir. CSS'de, bu öğeleri gizlemek veya görünür kılmak için display özelliği kullanılabilir.5. Font ve Yazı Stilleri
Responsive tasarımda metinlerin okunabilirliği önemlidir. vw (viewport width) birimi gibi özellikleri kullanarak metin boyutlarını ve yazı aralıklarını ayarlayabilirsiniz.
CSS:
body {
font-size: 16px;
}
@media only screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
