Front-end responsive sorunları

brbross 1044 gün önce

663 defa görüntülendi ve 2 kişi tarafından değerlendirildi

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?

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (5)

venloress

1041 gün önce

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.

#005906

ugur011

6 gün önce

bootstrap kutuphanesinde var ama istersen kendinde yapa bilirsin
<button>Lorem</button>

button{

    width:20vw;
    background: red;

}
@media and (min-width: 576px) only{

        background: blue;

}

#013291

deadmonster

1041 gün önce

Bana göre ne olmak iatediğine bağlı.
Eğer front-end tarafına çalışıyorsan bence kesinlikle css'e tam odaklanıp iyice çözmelisin.
Ama yok ben back-endciyim dersen (benim gibi) bootstrap kullanmanı tavsiye ederim.

#005915

smack

1041 gün önce

bootstrap kütüphanesini kullanmanizi ve incelemenizi öneririm

#005884

lucifer

1044 gün önce

@media kullanın sorun yaşıyorsanız.

#005627