Bootstrap Ekrana Göre Metinlerin büyümesi ve küçülmesi

serkankuyu 1349 gün önce

870 defa görüntülendi

Şöyle bir sorunum var;
Bootstrap alt yapısına sahip bir tasarım ekran boyutuna göre büyüyor. Sayfanın yakınlaştır özelliğini 100%'den 90%'a yaptığımızda istediğimiz görünüme ulaşıyor. Bu durumda tüm ekran koşullarında mevcut durumunu nasıl koruyacağız.

Şimdiden teşekkür ederim.

css

Soru hatalı mı? 👎

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

Spam olarak işaretle

Cevaplar (8)

tayfunerbilen

1343 gün önce

kullanacağın şey zoom: .9; değerini eklemek.
buda %90 büyüklükte gösterecek tüm sayfanı

#004683

webdevyusuf

1349 gün önce

Tamam dostum kafanı yorma biraz CSS öğren sonra tekrar dediklerime dön bak.

#004636

serkankuyu

1349 gün önce

Senin bahsettiğin sadece genişliğini ayarlıyor. Oysa istediğim bu değil.

#004635

webdevyusuf

1349 gün önce

@media (max-width: 900px) {
    span {
        font-size: 15px;
    }
}

#004634

webdevyusuf

1349 gün önce

Yani ters görünen yerleri @media etiketinin içinde max-width ayarlanmış şekilde hepsini seçip istediğin değerleri değiştiriceksin.

#004633

webdevyusuf

1349 gün önce

Bende yapman gerekeni form yapısına göre anlattım. benim .form-control yazdığım yere sana lazım olan sınıfı yazıcaksın.

#004632

serkankuyu

1349 gün önce

Form yapısından bahsetmedim. Genel görümle alakalı olarak. Bilgisayar ekranlarına göre siteye yakılaşıyor ve 100% olduğunu öyle büyüyor ki, oysa yakınlaşma 90% olunca normale dönüyor.

#004631

webdevyusuf

1349 gün önce

CSS ile kendin ayarlıycaksın mesela form-control sınıfına sahip olanların width değerini düşürelim.

@media (max-width: 1000px) {
    .form-control {
        width: 100%;
    }
}

@media (max-width: 900px) {
    .form-control {
        width: 90%;
    }
}

@media (max-width: 800px) {
    .form-control {
        width: 80%;
    }
}

max-width'in değeri cihazın genişliği ne kadarsa ona göre ayarlaması için. Mesela biz 1000px yazdık. Eğer cihaz 1000px veya aşağısıysa o uygulanacak.
Detaylı bir örnek: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

#004630