Yazeka
Arama sonuçlarına göre oluşturuldu
CSS kullanarak responsive tasarım yapmak için aşağıdaki teknikler kullanılabilir:
- Media Queries: Ekran boyutuna göre farklı stil tanımlamaları yapmak için kullanılır 12. Örneğin, aşağıdaki kod bloğu ekran genişliği 768 pikselin altında olduğunda menünün görüntülenmesini engeller 2:
@media screen and (max-width: 768px) { .menu { display: none; } }
- Flexbox: Öğelerin esnek bir şekilde yerleştirilmesini sağlar 12. Aşağıdaki kod bloğu öğeleri yatay olarak hizalar 2:
.container { display: flex; flex-wrap: wrap; justify-content: space-between; }
- Grid: Öğelerin sıralanması ve hizalanması için kullanılır 13. Aşağıdaki kod bloğu öğeleri 3 sütuna ayırır 2:
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }
- Viewport Meta Tag: Web sayfasının mobil cihazlarda nasıl görüntüleneceğini kontrol eder 13.
meta
etiketi içine eklenen aşağıdaki kod, viewport özelliğini ayarlar 3:<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Bu teknikler, web sitesinin farklı ekran boyutlarına ve cihazlara uyumlu olmasını sağlar.
5 kaynaktan alınan bilgiyle göre: