Bootstrap olmadan nasıl mobil/tarayıcı uyumlu yapılıyor

17-08-2019, 20:42:53

Bügüne kadar okulda Bootstrap ile site yaptık ama Bootstrap'sız nasıl yaparız hiç bilmiyorum bir kaç araştırdım @media only screen and ile yapılıyormuş.

bir kaç video izledim öğrendim sayılır ama hiç web sitesi yapan yok yada bulamadım , hep şu boyut'tan şu boyut olursa kırmızı olsun gibi örnekler yapılmış. Tam kapsamlı öğreten yok.

sizden istediğim ben bunu nasıl öğrenirim, elinizde udemy - youtube vs. video felan varsa atar'mısınız.

17-08-2019, 20:46:01

#2

orcuntuna

https://tailwindcss.com/

17-08-2019, 20:53:53

#3

Developer

Siz örnek olarak böyle bir tanımlama yaptığınızda:

element {
     width: 400px;
}

Global olarak bir tanımlama yapmış olursunuz. Her cihazda element 400px olarak kullanılır.

element {
     width: 400px;
}

@media screen and (max-width: 768px) {
     element {
          width: 200px;
     }

Şeklinde yapacağınız bir tanımlamada ise 768px'in üzerinde ki genişliklerde element 400px olsun, 768px'in altında ki değerlerde ise 200px olsun demiş olursunuz. Bunu sadece width attribute'ına değil, bütün attribute(background-color, color, box-shadow) değerlerine yapabilirsiniz.

17-08-2019, 21:10:23

#4

alisahanyalcin

mdcye bakın isterseniz Google'ın

17-08-2019, 21:14:16

#5

flyingatm

Bootstrap, foundation, simple css vs. vs. bunların hepsi prototip dizayn içindir.

Hızlı hızlı yaparsın ama performansı tartışılır. İşini bile birisi kendi yazdığı custom CSS ile (hiçbir bootstrap gibi css framework'u kullanmadan) 10-15KB css dosyası ile işini görür. Ancak bootstrap 4 şu an hali hazırda javascript dosyasıyla beraber 300KB civarında. Gel gör ki, çoğu web designer bootstrap'i sadece layout için kullanıyor. ( sidebar content sidebar gibi )

Sonrasında da javascript'e dair sadece dropdown menüyü alıyor ve bitiriyor. E, ne oldu? 300 KB'ı aslında 500 byte kodla yapılacak bir şey için kullandın. Bu bir tasarım ayıbıdır.

Ciddi projelerde zaten bu tür framework'lar kesinlikle kullanılmaz. Protipi belki hızlı olsun diye bunlar üzerinde yapılır ancak final sürümü tamamen kendi yazdığınız CSS olmalıdır.

Responsive için ise, geliştiricinin belli başlı kırılma noktalarını bilmesi gerekmektedir. 1200PX ve üstü, 960PX ve altı, 768PX ve altı 460PX ve altı gibi. Bunlar bilindiği sürece;

@media screen and (max-width: 768px) gibi kodlarla işinizi görebilirsiniz ve inanın çok daha özgür ve iyi görürsünüz. Özgün olursunuz en azından.

17-08-2019, 21:16:29

#6

inceprivate

burak2yilmaz adlı üyeden alıntı: mesajı görüntüle

Siz örnek olarak böyle bir tanımlama yaptığınızda:

element {
     width: 400px;
}

Global olarak bir tanımlama yapmış olursunuz. Her cihazda element 400px olarak kullanılır.

element {
     width: 400px;
}

@media screen and (max-width: 768px) {
     element {
          width: 200px;
     }

Şeklinde yapacağınız bir tanımlamada ise 768px'in üzerinde ki genişliklerde element 400px olsun, 768px'in altında ki değerlerde ise 200px olsun demiş olursunuz. Bunu sadece width attribute'ına değil, bütün attribute(background-color, color, box-shadow) değerlerine yapabilirsiniz.

mesela slider yapıyorum geçiş oklarını alta koyuyorum ama bu telefonda veya başka bir çözünürlükde bozuluyor bunu nasıl önlüyoruz . ekranı yavaşca küçülttüğümde yeri bozuluyor, orantılı kalmasını isityorum

17-08-2019, 21:34:33

#7

Developer

inceprivate adlı üyeden alıntı: mesajı görüntüle

mesela slider yapıyorum geçiş oklarını alta koyuyorum ama bu telefonda veya başka bir çözünürlükde bozuluyor bunu nasıl önlüyoruz . ekranı yavaşca küçülttüğümde yeri bozuluyor, orantılı kalmasını isityorum

Bu konuda nereye sabitlediğiniz, parent elementin değerleri vs. gibi durumlar söz konusu. Bu biraz responsive dışında position ile alakalı da bir durum.

17-08-2019, 23:14:02

#8

Millikan

flyingatm adlı üyeden alıntı: mesajı görüntüle

Bootstrap, foundation, simple css vs. vs. bunların hepsi prototip dizayn içindir.

Hızlı hızlı yaparsın ama performansı tartışılır. İşini bile birisi kendi yazdığı custom CSS ile (hiçbir bootstrap gibi css framework'u kullanmadan) 10-15KB css dosyası ile işini görür. Ancak bootstrap 4 şu an hali hazırda javascript dosyasıyla beraber 300KB civarında. Gel gör ki, çoğu web designer bootstrap'i sadece layout için kullanıyor. ( sidebar content sidebar gibi )

Sonrasında da javascript'e dair sadece dropdown menüyü alıyor ve bitiriyor. E, ne oldu? 300 KB'ı aslında 500 byte kodla yapılacak bir şey için kullandın. Bu bir tasarım ayıbıdır.

Ciddi projelerde zaten bu tür framework'lar kesinlikle kullanılmaz. Protipi belki hızlı olsun diye bunlar üzerinde yapılır ancak final sürümü tamamen kendi yazdığınız CSS olmalıdır.

Responsive için ise, geliştiricinin belli başlı kırılma noktalarını bilmesi gerekmektedir. 1200PX ve üstü, 960PX ve altı, 768PX ve altı 460PX ve altı gibi. Bunlar bilindiği sürece;

@media screen and (max-width: 768px) gibi kodlarla işinizi görebilirsiniz ve inanın çok daha özgür ve iyi görürsünüz. Özgün olursunuz en azından.

hocam belli seviyeden sonra işi nasıl daha iyi yaparıma geliyorsunuz nasıl yaparımı bırakıp çok iyi özetlemişsiniz.

17-08-2019, 23:50:41

#9

flyingatm

Millikan adlı üyeden alıntı: mesajı görüntüle

hocam belli seviyeden sonra işi nasıl daha iyi yaparıma geliyorsunuz nasıl yaparımı bırakıp çok iyi özetlemişsiniz.

maalesef ki öyle, ki bu süreçten sonra işler daha da garip bir hal alıyor. ağır sorguları iyileştirip sürekli sorguyu döndürüp CPU ve RAM kullanımlarını kontrol etmek... Keşke eskiden olduğu gibi " aaa çalıştı! " dediğim günlere dönebilsem.