Responsive Nedir? Görselli Anlatım

  • Forum kurallarına uyarak hareket ediniz aksi takdirde yönetim sorumlu tutulmaz

Mr.Bold

Moderator
1 Tem 2019
32
12
8
Uganda
Responsive kelime anlamı olarak bir sitenin birçok cihazda uyumlu olarak çalışması demektir.bu konuyu açarak görselli bir şekilde anlatacağım

28

yukarıda göründüğü gibi örnek bir fotoğraf mevcut.sitenin bilgisayar görünümünü bu şekilde varsayalım.numaralı yerlerde görsel var olduğunu sayalım.biz responsive duyarlı yapmadığımız için sitenin mobil görünümü aşağıdaki gibi olacaktır.


29

yukarıdaki mobil görünümdür.iki fotoğrafın büyük boyut olduğunu varsayarsak bu fotoğraflar iç içe geçecek ve böylece çok kötü bir tasarım olacaktır.tasarımın haricinde ise responsive olmaması seo açısından olumsuz etki yaratacaktır.bu siteyi mobil uyumlu yapmak için birtakım responsive kodlar ekleriz.responsive kodları eklendikten sonra mobil görünüm aşağıdaki gibi olacaktır.


32
bu sayade hem daha güzel bir tasarım hemde her cihaza uyumlu tasarım yapmış olduk.sitenizi responsive yapmak için aşağıdaki kodları kullanabilirsiniz.


Kod:
@media only screen and (min-width:960px) {
   
.ornek1 {
    width:500px;
    height:400px;
    background:#666;
    color:#fff;
    font-family: Arial;
    margin:0 auto;
    margin-top:30px;
    padding:20px
}

}

@media only screen and (min-width:769px) and (max-width:959px) {
   
.ornek1 {
    width:700px;
    background:yellow;
    color:#fff;
    font-family: Arial;
    margin:20px;
    padding:20px
}

}

@media only screen and (max-width:768px) {
   
.ornek1 {
    background:red;
    color:#fff;
    font-family: Arial;
    margin:20px;
    padding:20px
}

}
max-width en büyük ekran kodunu verir.en son etikette 768px cihaz altındaki cihazlarda rengi kırmızı olsun olarak ayarlanmış.mantık bu şekilde. .ornek1 kodu deneme amaçlıdır.bu kodu kendinize göre değiştirmeniz gerek.önemli olan şey ise pozisyon ayarlarını iyi bilmeniz gerek.yoksa bazı cihazlarda hata olabilir.kısa ve temiz kod kullanmaya özen gösterin.

Bu Adresten sitenizin responsive olup olmadığını öğrenebilirsiniz