Merhaba arkadaşlar,
Bir arayüz tasarlıyorum.Kişisel bir web sayfam için.
Henüz tam işe koyulmamışken,sorayım öğrenmek istedim.
Kullanıcı browser penceresini ne kadar küçültmek isterse web sayfası da küçültülen boyuta inmesi sağlamak istiyorum.
Bu yapabilmen için,tasarımı ne şekilde ve hangi adımları yapmalıyım?
Ya da bunu yapabileceğim bir kaynak,program,kod bir yardım ve görüşte bulunabilir misiniz ?
/ Ayrıca kolaya kaçıyor gibi görünmesin.Gerekirse öğretici video kaynağı bilen varsa izleyip öğrenmek isterim.
Responsive Hakkında Bilgi |
11 Mesajlar | 1.143 Okunma | ||
- Üyelik 25.10.2016
- Yaş/Cinsiyet 28 / E
- Meslek Junior IT Specialist
- Konum İstanbul Anadolu
- Ad Soyad R** Ç**
- Mesajlar 141
- Beğeniler 41 / 18
- Ticaret 0, (%0)
- Üyelik 26.05.2015
- Yaş/Cinsiyet 27 / E
- Meslek Front-end Developer
- Konum Ankara
- Ad Soyad F** Ç**
- Mesajlar 149
- Beğeniler 79 / 27
- Ticaret 7, (%100)
öğrenmek için bu kaynaktan faydalanabilirsiniz.
tıklayın
tıklayın
- Üyelik 25.10.2016
- Yaş/Cinsiyet 28 / E
- Meslek Junior IT Specialist
- Konum İstanbul Anadolu
- Ad Soyad R** Ç**
- Mesajlar 141
- Beğeniler 41 / 18
- Ticaret 0, (%0)
TitaMest Çok teşekkür ederim kaynak için,pekiştirmek açısından sürekli okuyup deneyerek bir bölümünü öğrenebilirim galiba.. :)
Ayrıca yanlış anlamadıysam eğer, siteye eklediğim her öğe için eklenen öğenin özelliğine göre mi değerleri verdiğiniz kaynağa istinaden değiştirmiş olacağım ?
Yoksa değerleri belli olan bir öğenin altına ek olarak bu kodu mu kullanmış olacağım ?
img {
max-width: 100%;
height: auto;
}
Ayrıca yanlış anlamadıysam eğer, siteye eklediğim her öğe için eklenen öğenin özelliğine göre mi değerleri verdiğiniz kaynağa istinaden değiştirmiş olacağım ?
Yoksa değerleri belli olan bir öğenin altına ek olarak bu kodu mu kullanmış olacağım ?
img {
max-width: 100%;
height: auto;
}
- Üyelik 23.01.2014
- Yaş/Cinsiyet 36 / E
- Meslek Öğrenci
- Konum Mersin
- Ad Soyad A** Ö**
- Mesajlar 2814
- Beğeniler 382 / 974
- Ticaret 2, (%100)
media-screen tagını araştırın biraz hocam. Belirleyeceğiniz min ve max değerler, ekran çözünürlüklerini sınırlayabilirsiniz.
Böylelikle örnek veriyorum ; 750px genişliğinde bi ekran geldiğinde yanyan iki konunuz gorunurken ; 360px genişlik geldğinde siz bunları alt alta listeyebilirsiniz.
Responsive css ile ilgili aramalar yaparsanız hem videolu anlatımlar mevcut hemde bir çok kod denemelerini bulabilirsiniz.
Böylelikle örnek veriyorum ; 750px genişliğinde bi ekran geldiğinde yanyan iki konunuz gorunurken ; 360px genişlik geldğinde siz bunları alt alta listeyebilirsiniz.
Responsive css ile ilgili aramalar yaparsanız hem videolu anlatımlar mevcut hemde bir çok kod denemelerini bulabilirsiniz.
Okşadıkça insanları, içinden çıkıyor Cini...
- Üyelik 25.10.2016
- Yaş/Cinsiyet 28 / E
- Meslek Junior IT Specialist
- Konum İstanbul Anadolu
- Ad Soyad R** Ç**
- Mesajlar 141
- Beğeniler 41 / 18
- Ticaret 0, (%0)
Mağara_Adamı İlginiz için teşekkür ederim.Kendimi geliştirmek istediğim konuydu,fikirlerinize ihtiyacım vardı teşekkür ederim.Doğru gördüğünüz kaynaklarınızda varsa paylaşırsanız okumak istiyorum..
Belirttiğiniz konularda araştırma yapıyorum şuan.
Belirttiğiniz konularda araştırma yapıyorum şuan.
- Üyelik 23.01.2014
- Yaş/Cinsiyet 36 / E
- Meslek Öğrenci
- Konum Mersin
- Ad Soyad A** Ö**
- Mesajlar 2814
- Beğeniler 382 / 974
- Ticaret 2, (%100)
Hocam tek kaynaga bağlı kalmayın. Her kaynakta farklı birşey öğrenirsiniz bunu unutmayın. Gerekirse aynı şeyin anlatıldığı bir öğeyi farklı kişilerden dinleyin okuyun. Çünkü gerçekten bu konuda önemli olan fikirdir. Birşeyi yapmanın bir sürü yolu olabiliyor. Sizde bu yollardan aklınızda kalanla devam edersiniz.
Bu neden sabit bir kaynak öneremiceğim. Bol bol googleyi kurcalayın.
Evvela, resnponsive tasarıma sahip temaları inceleyin. Editleyin vs. Neyin nasıl değiştiğini görürsünüz. Sonra hazır bi temayı responsive haline getirmeyi çalışın vs. Biraz zaman ve emek isteyen bir iş ancak yapması çokta zor birşey değil ilgiliyseniz.
Bu neden sabit bir kaynak öneremiceğim. Bol bol googleyi kurcalayın.
Evvela, resnponsive tasarıma sahip temaları inceleyin. Editleyin vs. Neyin nasıl değiştiğini görürsünüz. Sonra hazır bi temayı responsive haline getirmeyi çalışın vs. Biraz zaman ve emek isteyen bir iş ancak yapması çokta zor birşey değil ilgiliyseniz.
Okşadıkça insanları, içinden çıkıyor Cini...
- Üyelik 25.10.2016
- Yaş/Cinsiyet 28 / E
- Meslek Junior IT Specialist
- Konum İstanbul Anadolu
- Ad Soyad R** Ç**
- Mesajlar 141
- Beğeniler 41 / 18
- Ticaret 0, (%0)
Mağara_Adamı Çok teşekkürler fikirleriniz için,mutlaka tüm kaynaklardan araştırıyor olacağım...Tıkandığım yerde nereye geleceğimi biliyorum :)
- Üyelik 03.10.2013
- Yaş/Cinsiyet 44 / E
- Meslek Yazılım Uzmanı, Matematikçi
- Konum Ankara
- Ad Soyad S** T**
- Mesajlar 1118
- Beğeniler 325 / 324
- Ticaret 2, (%100)
Normal Ekranlara Göre
Tablet Ekranlarına Göre
gibi örnekleri çoğaltabilirsin.
.kapsul{width:1000px;}
Tablet Ekranlarına Göre
@media (max-width:767px)
{
.kapsul{width:600px;}
}
gibi örnekleri çoğaltabilirsin.
www.ontedi.com
www.cizgi.site
www.cizgi.site
şöyle bir resmim var. Bu örnek üzerinden gidebilir misiniz ? - Üyelik 03.10.2013
- Yaş/Cinsiyet 44 / E
- Meslek Yazılım Uzmanı, Matematikçi
- Konum Ankara
- Ad Soyad S** T**
- Mesajlar 1118
- Beğeniler 325 / 324
- Ticaret 2, (%100)
Hocam, resim üzerinden gidecek çok bir şey yok. Çünkü width:100%; verirseniz çözünürlük ne olursa olsun kapsayıcısına göre davranır.
O yüzden resimlerde şunu kullanabilirsiniz.
O yüzden resimlerde şunu kullanabilirsiniz.
.resim{width:100%;}
www.ontedi.com
www.cizgi.site
www.cizgi.site