Arkadaşlar tek sayfa bir site hazırlıcam. tarayıcıyı küçülttükçe ekrandaki yerleşimlerde ona göre şekil alsın istiyorum nasıl yapabilirim ?
Ben nerden başlamalıyım ps tasarım yaptım resimler img ler tamam html css e geçicem yardımcı olabilcek var mı ?
Responsive hakkında bilgisi olanlar bakabilir mi |
5 Mesajlar | 1.050 Okunma | ||
- Üyelik 11.02.2014
- Yaş/Cinsiyet 36 / E
- Meslek Webtasarım and grafik
- Konum Balıkesir
- Ad Soyad A** A**
- Mesajlar 177
- Beğeniler 31 / 19
- Ticaret 3, (%100)
- Üyelik 04.11.2014
- Yaş/Cinsiyet 24 / E
- Meslek Öğrenci
- Konum İstanbul Anadolu
- Ad Soyad K** K**
- Mesajlar 1290
- Beğeniler 0 / 208
- Ticaret 27, (%100)
html css biliyorsan css den yapman gereken sadece
@media(max-width:700px){
Buraya 760px den küçük haldeykenki halininin css kodlarını koyacaksın.
}
@media(max-width:460px){
Buraya 460px den küçük haldeykenki halininin css kodlarını koyacaksın.
}
böyle css den yapabilirsin ordaki 460px 760px gibi yerleri değiştirceksin CSS bilgin varsa yapabilirsin.
@media(max-width:700px){
Buraya 760px den küçük haldeykenki halininin css kodlarını koyacaksın.
}
@media(max-width:460px){
Buraya 460px den küçük haldeykenki halininin css kodlarını koyacaksın.
}
böyle css den yapabilirsin ordaki 460px 760px gibi yerleri değiştirceksin CSS bilgin varsa yapabilirsin.
- Üyelik 07.02.2015
- Yaş/Cinsiyet 28 / E
- Meslek Front-end developer
- Konum Zonguldak
- Ad Soyad T** D**
- Mesajlar 175
- Beğeniler 18 / 28
- Ticaret 0, (%0)
PC > TABLET > MOBİL
En uygun çözünürlük 960PX'dir. Bu demek değildir ki 960px'den yukarı yapılamaz mı yapılabilir ama en uygunu 960'dır.
Neden? Çünkü tabletlerin en geniş çözünürlüğü 960'dir. Hem tablet hemde pc için uyumlu olacağını varsayarak ben 960px kullanıyorum.
Peki nasıl oluyor?
@media only screen and (max-width: 960px) { }
bu kodumuz ekran çözünürlüğüne göre sayfaları görüntülüyor.
yani diyor ki benim sayfamın en büyük çözünürlüğü 960'dır.
{ } bunların içine yazılacak her kod 960px çözünürlük olarak algılanır tarayılar tarafından.
Örnek kod;
@media only screen and (max-width: 960px)
{
#test
{
color:#000;
background: #fff;
}
}
tablet ve pclerin daha düşük çözünürlük olanları var.
bunlarıda max-width: 960px olanlar çözünürlüğü o değerlere göre düşürerek kodlama yapabilirsiniz.
En uygun çözünürlük 960PX'dir. Bu demek değildir ki 960px'den yukarı yapılamaz mı yapılabilir ama en uygunu 960'dır.
Neden? Çünkü tabletlerin en geniş çözünürlüğü 960'dir. Hem tablet hemde pc için uyumlu olacağını varsayarak ben 960px kullanıyorum.
Peki nasıl oluyor?
@media only screen and (max-width: 960px) { }
bu kodumuz ekran çözünürlüğüne göre sayfaları görüntülüyor.
yani diyor ki benim sayfamın en büyük çözünürlüğü 960'dır.
{ } bunların içine yazılacak her kod 960px çözünürlük olarak algılanır tarayılar tarafından.
Örnek kod;
@media only screen and (max-width: 960px)
{
#test
{
color:#000;
background: #fff;
}
}
tablet ve pclerin daha düşük çözünürlük olanları var.
bunlarıda max-width: 960px olanlar çözünürlüğü o değerlere göre düşürerek kodlama yapabilirsiniz.
Hızlı deneyin, hızlı başarısızlığa uğrayın ve hızlı bir şekilde kendinizi yenileyin.
― T. Peters
― T. Peters
- Üyelik 11.02.2014
- Yaş/Cinsiyet 36 / E
- Meslek Webtasarım and grafik
- Konum Balıkesir
- Ad Soyad A** A**
- Mesajlar 177
- Beğeniler 31 / 19
- Ticaret 3, (%100)
Normal html css tasarım yaptım html site yaptım ama bu mobile gelince kafam almıyor ilk girişlerde hep zorlanıyorum niyeyse.
- Üyelik 16.12.2014
- Yaş/Cinsiyet 37 / E
- Meslek Frontend Developer
- Konum İstanbul Anadolu
- Ad Soyad E** K**
- Mesajlar 75
- Beğeniler 1 / 23
- Ticaret 0, (%0)
Normal html css tasarım yaptım html site yaptım ama bu mobile gelince kafam almıyor ilk girişlerde hep zorlanıyorum niyeyse.
Merhaba,
Bootstrap kullanarak kod kısmına başlarsan daha iyi olacaktır. Daha sonrasında da arkadaşların bahsettiği @media elementiyle cssde ufak değişiklikler yaparak responsive yapabilirsin çalışmanı.
Bootstrap için aşağıdaki linkten bilgi sahibi olabilirsin. En alttaki linkte de çalışmalarımızın bi kısmı var. İşin içinden çıkamaz yaptırmak istersen uygun fiyata yapabiliriz de. Kolay gelsin dostum
http://informationstock.com/bootstrap
http://templates.informationstock.com/
templates.informationstock.com
www.informationstock.com
www.informationstock.com
Konuyu toplam 6 kişi okuyor. (0 kullanıcı ve 6 misafir)