Como faço para diminuir o valor de um elemento conforme a janela do navegador diminui?

Front-end CSS
, ,
#1

Eu tenho um elemento com transform: translateX(-150px) e quero que conforme o usuário diminuir a janela o translateX vá diminuindo, como faço isso?

body {
  width: 98vw;
  height 98vh;
  overflow-x: hidden;
}

#exemplo {
  width: 546px;
  height: auto;
  margin: auto;
  align-content: center;
  display: flex;
  overflow-x: hidden;
  transform: translateX(-30vw);
}

.exemplo {
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 10px;
}

<html>

<body>
  <div id="exemplo">
    <div class="exemplo">
    </div>

    <div class="exemplo">
    </div>

    <div class="exemplo">
    </div>

    <div class="exemplo">
    </div>

    <div class="exemplo">
    </div>

    <div class="exemplo">
    </div>

    <div class="exemplo">
    </div>
  </div>
</body>

</html>

Aqui tem um exemplo simples, quando eu diminuo o tamanho do navegador, da a sensação de que o valor do translate aumenta, porém eu quero a sensação seja o contrário, que dê a sensação de que está diminuindo.

#2

use media queries ou use % no seu translate. Ex: translateX(50%)

#3

Veja se esse exemplo é o que tu tah tentando fazer: Fixed ratio css resize using padding method - JSFiddle - Code Playground

#4

É tipo isso só que com várias caixas um ao lado do outro e sem diminuir de tamanho, como mostrei no exemplo