Merhaba

Mobil ve tabletleri farklı boyutlarda aynı görünüme sahip olması için aşağıdaki şekildeki gibi ayırıyorum. Her boyut için ayrı boyut yapmam gerekiyor. Bunları tek bir yerde bir kez yapıp tüm sürümlere uygun hale nasıl getiririm? Responsive tasarım denildi nasıl uygulayacağım. Ticimax alt yapısında özel bir yazılmı kullanılıyoruz. Sadece header menü kısmına kendimiz müdahale etmek istedik. Şuanda mobil sürümler hepsi aynı ancak tabletlerde sorun var. Her tablet marka modeli için farklı kodlama yapmam gerekti aslında yaptım. Ancak bu çok uzun bir yol bu şekilde mi yapılması doğru yoksa boşuna mı uğraşmışım onu anlamak istiyorum.

/* Sadece iPad Mini (768×1024) — Portre */
@media screen and (width: 768px) and (height: 1024px) and (orientation: portrait){


/* SADECE iPad Air (820×1180) — Portre
Tüm sayfalarda aynı header görünümü.
Aşağıdaki değişkenleri MANUEL değiştirerek yükseklik/boyutları ayarlayabilirsin. */
@media screen and (width:820px) and (height:1180px) and (orientationortrait){