her şeyin en pratiği, yapılmışı incelemek bence.

şunu indirip inceleyin: http://liquidgem.birondesign.com/

demo: http://liquidgem.birondesign.com/demo/index.html

demo css: http://liquidgem.birondesign.com/demo/css/style.css

önemli olan değerleri yüzde olarak vermek. 100px demeyeceksiniz de, 10% diyeceksiniz mesela.

ve diğer önemli kısım:

Alıntı
@media only screen and (max-width: 510px) { ... }
bunun anlamı, tarayıcı genişliği maksimum 510px iken, bu kodları çalıştır. aksi halde, temel kodları çalıştır. bu özel düzenleme, genel düzenlemeden önceliklidir.

mesela genel css'de, üstteki menünün arkaplanı siyah demiş olalım:

Alıntı
nav {background:#000;}
ama genişlik 320px iken(iphone), background beyaz olsun:

Alıntı
nav {background:#000;}
@media only screen and (max-width: 320px) { nav {background:#fff;} }
özel düzenlemedeki "arkaplan beyaz olsun" aktif hale gelir. genel düzenlemedeki değeri tarayıcı önemsemez.

kısacası, şu anki temanızı iphone'a uydurmak için, css dosyanızın altına

Alıntı
@media only screen and (max-width: 320px) { ...} }
yazın ve site nasıl gözükmeliyse o kodları girin. mesela üst menü iphone'da gözükmesin:

Alıntı
@media only screen and (max-width: 320px) { nav{display:none;} }
yaptığınız temayı test etmek için: http://mattkersley.com/responsive/