Front-end responsive sorunları
Merhaba, front-end kısmında Responsive olaylarına çok takılıyorum.
Mesela card'ları tasarlıyabiliyorum, ancak responsive'e dökemiyorum.
Flexbox'u etkin kullanırım ama responsive'e gelince takılıyorum.
Tecrübelerinizi lütfen benimle paylaşabilir misiniz?
Css'i tamamen anlamadan bir kütüphane kullanmanızı asla önermem. Tabi tercih yine sizin ama sonuçta kütüphanelerde css den ibaret ve css de bilmediğin bir kısmı kütüphane kullanarak çözemezsin.
Şimdi gelelim responsive olayına, responsive tasarımı ayrı genişliklere uyarlamaktır.
Örneklerle ilerleyelim.
<a class="button">Hello world</a>
<style>
.button {
color:red;
font-weight:600;
font-size:34px;
}
@media (min-width: 576px) {
.button {
color:blue;
}
}
</style>
Yukarıdaki kodumuzda normal olarak buton rengimiz kırmızı fakat "min-width: 576px" olarak ekleyip buton rengine mavi verirsek.
Bu sefer en küçük ekran genişliği 576px ve yukarısı için geçerli olacak demek.
Biraz daha basitleştireyim. "min-widht" kısmının içine yazdıklarımız 576px genişliğinden sonra uygulanacaktır.
Merak etme örnekler yaparak mükemmel işler çıkaracağına inanıyorum. Kolaylıklar dilerim.