CSS Mobil Tablet ve Masaüstü Görünümü Hk. Bir Soru

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){

her sürüm cihaz için ayrı bişi düşünmüyorsan hepsinde genişlik yükseklik yapmana gerek yok aslında. Genel kullanım genişlik olarak bakabilirsiniz.

@media screen and (max-width: 992px) { }

şeklinde ayarlayabilirsin.

Genelde 576 , 768 , 992 ,1024, 1200 gibi kontrol ediyorum ben

Her cihaz için aynı yapıyı düşünüyorum. yani 576, 768, 992, 1024, 1200 bunları @media screen üzerinde tek bir seferde yazsam hepsi için geçerli mi olur?

o kısım şöyle
@media screen and (max-width: 1200px) {
1200px e kadar böyle göster diyeceksin genel olarak sıgmayan yerleri bozuk yerleri 1200px genişlğe kadar burada duzeltirsin
}
@media screen and (max-width: 992px) {
altına bunu acarsın usttekinde yaptığın değişiklikler 992de sıgmıyor tam oturmuyor burada düzeltirsin 992pxe kadar burdaki geçerli olur 993px olunca usttekine geçer
}

mantık bu şekilde chatgpt yazsan belki daha duzgun anlatabilir