Detaylı Mobil Uyumlu (Responsive) Tema Yapımı

01 Şub 2017 19:21

öncelikle şunu söyleyim az biraz css ve html bilginiz olması lazım eğer bilginiz yoksa alt kısımlara geçmeden
css için : http://www.w3schools.com/css/
html için : http://www.w3schools.com/html/
buralarda kod örneklerini inceleyerek ve youtube ve googleda html ve css derlerini okuyup izleyerek kendinizi biraz geliştirin
yanlış anlamayın ama eğer site yönetmekse arzunuz temel html ve css bilginizin olması lazım zaten

temel html ve css bilginiz varsa sitenizdeki temayı kolayca mobil uyumlu responsive haline getirmekte pek zor olmucak zaten sizin için

şimdi ilk eklememiz gereken <head></head>tagları arasına bir meta etiketi var bu meta etiketi ne işe yarıyor kısaca detaya girmeden belirtmek gerekirse siteye giriş yaptığınız cihazın kaç pixsel ile çalıştığını bulmaya yarıyor buna görede belirlediğimiz css kodları devreye girip sitenizin o cihaza en ugun görünüm şeklini ekrana yansıtıyor yani bu kodu eklemezseniz @media ile eklediğiniz css kodları bir işe yaramıyacaktır

Kod Seç

<meta name="viewport" content="width=device-width, initial-scale=1"/>
şimdi kısaca bir örnek vercem daha sonra alıntılar ve kaynaklar belirtecem
css kodlarımızı index.css de en alta ekleyebiliriz veya harici bir responsive.css diye yeni bir css dosyası oluşturup siteye çekebiliriz
buraya kadar herşey anlaşıldıysa başlayalım örnek default temaya göre ama her temada mantık aynı
index.css mizde bulalım

Kod Seç

div#wrapper {
    margin: 0 auto;
    min-width: 764px;
    max-width: 2300px;
}

burda id wrapper olan div in değerleri mevcut (<div id="wrapper">)
bu div in minimum genişliği 764 piksel maksimum genişliği 2300 piksel olarak belirlenmiş tabi bu bizim işimize gelmiyor neden site 764 pikselden daha küçük bir seviyede açılamıyor buda mobil cihazlarda rahatsız edici bir görüntü demek
şimdi yapmamız gereken css nin @media özelliğinden faydalanmak

Kod Seç

@media screen and (max-width: 768px) {

}

örneğin sitemize 420px genişliğinde bir telefonla girildiğinde nasıl üstte belirttiğimiz div wrapper nasıl gözükmesi istiyorsak onu belirtelim

Kod Seç

@media screen and (max-width: 768px) {
	div#wrapper {
    min-width: 100%;
}
}

şimdi üstteki kodda ben 768px altında bir cihaz girdiğinde div değişmesini istedğim değerleri belirttim
gördüğünüz üzere sadece min-width değerini değiştirerek 768 piksel genişlikten küçük mobil cihazda bu div in ekranı 100 de 100 kaplamasını sağladık
sizde html taglarında kullanılan css class ve idlerini bu şekilde ekleyerek sitenizi responsive hale getirebilirsiniz
en basit bu şekilde anlatabildim umarım anlamışsınızdır

bu konuda inceleyebileceğiniz alıntılar ve kaynaklara değinelim
smf responsive modu : http://custom.simplemachines.org/mods/index.php?mod=4040
sitemizdeki bazı konular http://smf.konusal.com/index.php?topic=79.0
http://smf.konusal.com/index.php?topic=222.0 (google pagespeed te site puanını artırma)
sitemizdeki ve resmi sitedeki tema bölümündeki responsive temaları inceleyebilirsiniz

firefox veya chrome incele yaparak ufak editler http://smf.konusal.com/index.php?topic=157.0
@geçitli mobil tema konusu : http://webtiryaki.com/smf/neden-mobil-uyumlu-tema/

19 Nis 2021 04:18

haha koptum

siz güzel anlatmışsınız ama kimse ilgilenmemiş uğraşmakla asfasfdf
emeğinize sağlık

Smf Destek
Smf Tema ve Destek Sitesi

Haberler: