Merhaba dostum

Hazır kütüphaneler kullanmıyorsan Bootstrap gibi,
Oluşturduğun elemenlerde yüzdelik(%)'lik kullanırsan problemi çözersin.
Eğer ki bu element bir yazıysa rem kullanabilirsin. 1rem = 16px'dir ve tarayıcı ona göre çalışacaktır. Telefon, tablet, telefona göre kendini ayarlayacaktır.
Eğer bu element bir resimse yine %'lik sistemle çalışabilirsin. Ama diyosan ki illa px kullanıcam ben @media rule nasıl yazılır öğrenmen gerekir.

Örnek vericek olursam ;

    <style>
        .text{
            width:25%;
        }
    </style>
    <div>
        <p class="text">Bu bir deneme metnidir.</p>
    </div>

Yukarıdaki örnekte bir div elementim var ve içinde bir yazı var.

Bu yazı, içinde bulunduğu div elementinin genişlik olarak %25'lik bir kısmını kapsamakta.

Yani ben bu div'in içinde hep %25'lik element koyucaksam full olarak sadece 4 tane eleman koyabilirim.
(Bu yüzdelikler tamamen sana kalmış istersen 10 tane koyarsın hepsine %10 verirsin aynı hesap olmuş olur.)

Bu sayede telefonda, masaüstünde kendini ona göre ayarlayıp çalışacaktır.

Bunu aynı şekilde bütün elementlere yapabilirsin.

Responsive tasarım mantığı genel olarak bu şekildedir.

Umarım sana yardımcı olmuşumdur.
Kolay gelsin.