İlk olarak HTML&CSS kısmını yaptığınızı varsayıyorum ki bu şekilde yapıyorsunuz zaten. Mesela anasayfayı HTML hale getirdiniz yani anasayfayı bitirdiniz diyelim diğer HTML sayfalarına geçmeden önce ilk önce bu sayfayı responsive'e uyarlayın.
Responsive konusu için çok geniş kapsamlı bir şey olduğu için detaya giremeyeceğim ancak CSS bilginiz varsa kolay bir şekilde yaparsınız.
Şimdi ben şu şekilde yapıyorum.
İlk başta 768px tasarımdan başlıyorum buna başlamamın sebebi kod fazlalığından kurtulmak.
CSS'de en alt satıra bunu ekleyin:
@media only screen and (max-width: 768px) {
.ortala {
width: 480px; // ÖRNEK
}
}
Burada yaptığınız şey en basitinden max-width değeri size o kodların maksimum 768px'de çalışacağını söyler. 768px'den yüksek ekranda çalışmaz.
Siz bu kodlar arasında kendinize göre mobile uyarlayacaksınız.
768px genişlik bir tasarımda container kısmı için kullanacağız değer %'lik olabilir ama % ile başa çıkmak zordur o yüzden px olarak değerleri girmeye çalışın.
Bunu yaptınız diyelim şimdi 320px ve 480px arasındaki değerler var.
Ben genel olarak 320px yapmıyorum 480px altına %'lik değer tanımlıyorum bu sayede 320px'de de sorunsuz çalışmış oluyor.
Bunu da şu şekilde yapacaksınız
@media only screen and (max-width: 480px) {
.ortala {
width: 95% !important; // ÖRNEK (important kullanmamızın sebebi 768px'de değer tanımlamış olmamız)
}
}
Bunun haricinde birde şu şekilde yapacaksınız tasarımın genişliği 980px diyelim 768px ile 980px arasına media etiketi tanımlamanız gerekiyor.
@media only screen and (min-width: 768px) and (max-width: 980px) {
.ortala {
width: 768px; // ÖRNEK
}
}
Sizin öğrenmeniz gereken şey media etiketleri. 2 gün gibi bir sürede öğrendim ben.
1 yıl önceki videoma da bakıp bir şeyleri kavrayabilirsiniz.