v2.5.2
Giriş yap

Responsive Tasarım

ismailkaya
912 defa görüntülendi

Sadece html ve css ile hem mobil hem de bütün çözünürlüklere uyarlı site nasıl yapılıyor halen anlamıyorum
Hele bir de bootstrap ile yapıyorlar onu hiç anlamıyorum .
Ben html ve css ile güzel bir şey yapıyorum ama işin bir de mobil tarafı var
Ben,hazır web sitemi nasıl responsive hale getirebilirim?

redandwhite
1380 gün önce

Selam. Bootstrap değil de doğrudan siz kendi ızgara sisteminizi yazabilirsiniz ama çok uzun ve zorlu olur bu nedenle şunu belirtmek isterim;

Mesela diyelim ki iphone'yi baz alarak düzenleme yapacaksınız bu durumda tek ihtiyacınız olacak şey ölçüler. Örnek genişlik 320px olduğunu varsayalım ve 370px genişliğine geldiğinde farklı bir reaksyon göstermesini isteyeceksiniz zira farklı bir ekran boyutunu illa ki düşünmek durumundasınız.
O halde;

@media(min-width: 320px) and (max-width:370px) {

buraya kaynak kodunuzu yazmalısınız. Örnek veriyorum h1'in 30 px'den 15 px'e düşmesini istiyorsunuz bu durumda:

.h1 {
font-size:15px !important;
}

}

Yukarıdaki kod satırını amacınıza ve ekran çözünürlüklerine göre düzenlerseniz istediğiniz ekrana göre istediğiniz ayarlamayı yapabilirsiniz. Yok olmasını istediğiniz divi yok eder (display:none veya opacity:0), veya yerine farklı bir div getirtebilirsiniz. Umarım açıklayıcı olmuştur.