Bootstrap Ekrana Göre Metinlerin büyümesi ve küçülmesi
Şö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.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (8)
kullanacağın şey zoom: .9; değerini eklemek.
buda %90 büyüklükte gösterecek tüm sayfanı
Tamam dostum kafanı yorma biraz CSS öğren sonra tekrar dediklerime dön bak.
Senin bahsettiğin sadece genişliğini ayarlıyor. Oysa istediğim bu değil.
@media (max-width: 900px) {
span {
font-size: 15px;
}
}
Yani ters görünen yerleri @media etiketinin içinde max-width ayarlanmış şekilde hepsini seçip istediğin değerleri değiştiriceksin.
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.
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.
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