CSS taşmalar nasıl engellenir?

300319 dedi:

Alttaki kırmızı butonun genişliğini piksel olarak verdiğiniz için o piksel üzerinden devam ediyor. Onun yerine % olarak verirseniz kapsayıcı ile kendini ona göre boyutlandırır.

Veya;

CSS:Panoya kopyala

@media (max-width: 10px){

}

Bu şekilde belli bir çözünürlükte şekil değiştirebilirsiniz.

Genişletmek için tıkla...

oynozan dedi:

Önce o container'ın box-sizing'inin border-box olduğundan emin ol. Daha sonra hangi sayfa genişliğinden sonra buton taşmaya başlıyorsa, o genişlikten itibaren butona sabit bir genişlik atamak yerine yüzdeli bir değer ata.

CSS:Panoya kopyala

@media only screen and (max-width: 768px) { /* Hangi genişlikten itibaren taşıyorsa o değeri gir */
    button {
        width: 100%;
    }
   
    /* Butonun ortalanması için --> */
    .container {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
}

Genişletmek için tıkla...

ErrorCorrection dedi:

Hocam @media only screen nedir?
Ben daha beginner'ım da

Genişletmek için tıkla...

oynozan dedi:

Mesela benim ekranım 1920px diyelim, eğer ziyaret ettiğim siteyi telefonda açmak istesem ekranım 400px olacak. Doğal olarak sitede de bozulmalar olacak. Bu bozulmaları engellemek için CSS'te farklı ekran boyutları için farklı stil ayarlaması yapmanıza olanak veren Media Query'ler vardır. Media Query'lerin kullanımı için W3C'ye bakabilirsiniz. Sitenizin hangi pixelden itibaren bozulduğunu anlamak için Chrome Dev Tools'tan yararlanabilirsiniz.

Eki Görüntüle 1689077

Sağ taraftaki telefon ikonuna tıkladığınızda ekran boyutuyla oynayabiliyorsunuz. Yukarıda da ekran boyutunun kaç pixel olduğunu gösteriyor.

Genişletmek için tıkla...

ErrorCorrection dedi:

Bunun gibi mi hocam

Sürprizbozan: Technopat geniş

Eki Görüntüle 1689078

Sürprizbozan: technopat belli bir ekran width altında oluşan sağ bölüm

Eki Görüntüle 1689079

Genişletmek için tıkla...

oynozan dedi:

Evet hocam aynen öyle.

Genişletmek için tıkla...