Gönderen Konu: Siteyi responsive yapma  (Okunma sayısı 1539 defa)

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

Çevrimdışı minteger

  • Penguen
  • ***
  • İleti: 386
  • Dağıtım: Linux Mint 17.3 KDE
  • Masaüstü: --illede KDE
  • Grafik Kartı: Nvidia
  • İşlemci: AMD
Siteyi responsive yapma
« : 29 Aralık 2017, 13:15:50 »
Nasıl anlatsam nerden başlasam bilmiyorum.

Bootstrap 3 hazır tema kullundım. Yarıdan fazlası değişti zaten temanın. Bi dünya css ve HTML kodu çıkarıp ekledim. Ancak site responsive değil.

Firefox ta kullandığım bir eklenti var mesela "Mobile View  Switcher " .  Hepsi buradaya giriyorum ona tıklıyorum mobile haliyle görünüyor site başka bir yere giriyorum aynı şekilde sonuç alıyorum. Sahibinden.com aynı şekilde mesela. Bilindik sitelerin hepsinde mobile görünüme geçiyor. Ancak benim sitede olmuyor. Bootstrap da çözünürlük 768px in altına inmeden menu hamburger e  dönüşmüyor. Mesela sahibinden com da  1240px width olmasına rağmen mobilde görünüme geçince mobile haline bürünüyor site bunu nasıl sağlayabileceğime kafa yoruyorum iki gündür. Ama bir sonuca varamadım.

Fotoğra galerisi large da 4 grid ve mobile görünüme geçiyorum yine 4 grid oysaki ikiye inmesi lazım.  Acaba bootstrap 3 kullanmakla hata mı yaptım ?

Bunu gerçek manada responsive nasıl yapabilirim kafamdaki soru bu ?

Site Şu :

musaakay.com

@Gokhankrll

@Danny
@dokmeefrail


Sizleride çağırıp rahatsız ediyorum kusura bakmayın. Herkesin iyi kötü bir akıl hocası oluyor danışabileceğim. Benim danışıp sorabileceğim kimsem yok.
« Son Düzenleme: 29 Aralık 2017, 14:23:27 Gönderen: minteger »

Çevrimdışı dokmeefrail

  • Çok Yeni Penguen
  • *
  • İleti: 11
  • Dağıtım: mint
  • Masaüstü: cinnamon
Ynt: Siteyi responsive yapma
« Yanıtla #1 : 29 Aralık 2017, 17:46:26 »
Lg değilde MD veya sm denesen çözülebilir belki

Çevrimdışı minteger

  • Penguen
  • ***
  • İleti: 386
  • Dağıtım: Linux Mint 17.3 KDE
  • Masaüstü: --illede KDE
  • Grafik Kartı: Nvidia
  • İşlemci: AMD
Ynt: Siteyi responsive yapma
« Yanıtla #2 : 30 Aralık 2017, 00:39:04 »


Lg değilde MD veya sm denesen çözülebilir belki

Hmm. Lg yaptığım yerleri Md olarak değiştirsem mi acaba ?

Ama buda hamburger menunu 767px altında gözükmesine engel olmaz sanırım. Benim amacım 1080px altında hamburger menu gözüksün yada en azından 992 px altına inince. 

Çünkü iphon 8 de 1080px kısa kenar çözünürlüğü var. bu hepsiburada ve sahibinden gibi siteler sanırım çözünürlüğe göre değil cihaza göre görünümü ayarlıyorlar nasıl yapıyorlarsa.
« Son Düzenleme: 30 Aralık 2017, 00:50:44 Gönderen: minteger »

Çevrimdışı Danny

  • Proje Sorumlusu
  • *****
  • İleti: 2023
  • Nihilist
  • Dağıtım: Linux Mint
  • Masaüstü: Cinnamon
  • Grafik Kartı: Intel HD 620
  • İşlemci: Intel i7 - 7500U
  • RAM: 8 GB
Ynt: Siteyi responsive yapma
« Yanıtla #3 : 30 Aralık 2017, 09:27:00 »
Şimdi geldim işe, ayılmaya çalışıyorum. Konuyu doğru mu anladım bilmiyorum. mobil cihazlarda direkt olarak hamburger menunun görünmesini mi istiyorsunuz, eğer öyleyse zaten hamburger menu görünüyor. sadece sosyal medya kısmında bir kayma söz konusu. fotoğraf galerisi de 4 değil 2 grid görünüyor.




Gelip sağ yanağımdan öptü. Dindar değildim ama sol yanağımı da çevirmek istedim o an...

Çevrimdışı minteger

  • Penguen
  • ***
  • İleti: 386
  • Dağıtım: Linux Mint 17.3 KDE
  • Masaüstü: --illede KDE
  • Grafik Kartı: Nvidia
  • İşlemci: AMD
Ynt: Siteyi responsive yapma
« Yanıtla #4 : 30 Aralık 2017, 14:35:54 »
@Danny

Çok teşekkür ederim.

Evet doğru anlamışsın. Ancak iphone 8 plus un dikeyde çözünürlüğü 1080px(oha yani. ne gerek varsa el kadar ekranda) Yani burada her nekadar hamburger menu gözüküyor olsada cihaz çözünürlüğü dikey tutulduğunda 767 px i geçtiği zaman hamburger menu kayboluyor. En azından 992px de bunun görünmesini sağlasak yada. Diğer siteler nasıl oluyorda çözünürlükten bağımsız görüntüyü değiştiriyorsa öyle yapsak diye düşünüyorum. 

şimdi baktım j7 pro da bile 1920 * 1080 p imiş.  Yuh artık. Telefonların yarısı böyleyse işimiz zor..
« Son Düzenleme: 30 Aralık 2017, 14:39:45 Gönderen: minteger »

Çevrimdışı Danny

  • Proje Sorumlusu
  • *****
  • İleti: 2023
  • Nihilist
  • Dağıtım: Linux Mint
  • Masaüstü: Cinnamon
  • Grafik Kartı: Intel HD 620
  • İşlemci: Intel i7 - 7500U
  • RAM: 8 GB
Ynt: Siteyi responsive yapma
« Yanıtla #5 : 30 Aralık 2017, 16:03:03 »
Örneğin 4 kademeli bir responsive tasarım ölçüsü ayarlanıyorsa, çözünürlük ayarları aşağıdaki gibi olmalıdır.

Mobil Ekranlar : 0 – 767px
Dikey Tabletler : 768px – 991px
Yatay Tablet + Minibook Laptoplar :  992px – 1199px
Notebook + Desktop : 1200px ve Yukarısı

CSS yapısı yukarıdaki gibi hazırlanırsa her aralıkta farklı bir ekran ve menü yapısı kullanıcı karşısına gelecektir. Temanın CSS dosyalarından bu düzenlemeyi kolaylıkla yapabilirsin. Temayla çok fazla oynadığını yazmışsın, umarım responsive tasarımı bozacak olan satırları silmemişsindir :)
Gelip sağ yanağımdan öptü. Dindar değildim ama sol yanağımı da çevirmek istedim o an...

Çevrimdışı minteger

  • Penguen
  • ***
  • İleti: 386
  • Dağıtım: Linux Mint 17.3 KDE
  • Masaüstü: --illede KDE
  • Grafik Kartı: Nvidia
  • İşlemci: AMD
Ynt: Siteyi responsive yapma
« Yanıtla #6 : 05 Ocak 2018, 03:14:42 »
Örneğin 4 kademeli bir responsive tasarım ölçüsü ayarlanıyorsa, çözünürlük ayarları aşağıdaki gibi olmalıdır.

Mobil Ekranlar : 0 – 767px
Dikey Tabletler : 768px – 991px
Yatay Tablet + Minibook Laptoplar :  992px – 1199px
Notebook + Desktop : 1200px ve Yukarısı

CSS yapısı yukarıdaki gibi hazırlanırsa her aralıkta farklı bir ekran ve menü yapısı kullanıcı karşısına gelecektir. Temanın CSS dosyalarından bu düzenlemeyi kolaylıkla yapabilirsin. Temayla çok fazla oynadığını yazmışsın, umarım responsive tasarımı bozacak olan satırları silmemişsindir :)
Şu cevabı hemen o gün yazmıştım : Ama saat gece 12 den sonra dsl bir gitti pir gitti. 2 gün sonra girebildim net. e :

Yok zannetmiyorum. Zaten bootstrap3 de bu şekilde ayarlı. Ve bootstrap da fazla oynama yapmadım. bootstrap.css le oynama taraftarı değilim bir iki küçük değişikilik yaptım. onun dışında style.css var. Çoğu düzenlemeyi orda yaptım. Zaten istediğim yeni şeyler için yeni class ve id ler yazıyorum css de. değiştirmektense ekliyorum yani.
 Şuan bilgisayarımda yeni hali duruyor çalışmanın. Ancak 0 - 767 px ayarlasakta artık yen telefonların mesela vestelin kıytırık modellerinin bile çözünürlüğü 1920 x 1080 bu durumda 0-767 px geçerli olmaz. Aygıtın ne olduğunu php de bir hazır sınıf varsa bununla kontrol edip ona göre kullanıcıya istediğimiz görüntüyü vermemiz gerek aslında. Böylece çözünürlük yerine aygıtı esas almış oluruz. Pfff oda uzun iş şimdi. Son güncellenmiş haliyle kullansın biraz. Sonra yeniden düzenleriz.
Siz siz olun fotoğrafçıya site yapmadan önce iki kere düşünün.  :