你可能想坚持使用jQuery。在vanilla JS中，let Box = document.querySelector(".box")只选择它找到的类.box的第一个元素。你最好做let Box = $('.box');，jQuery会选择所有这些。
let btn_xxx = document.querySelector(".btn_xxx");就可以了，因为代码中每个类只有一个。

let Box = $('.box');
let btn_one = document.querySelector(".btn_one");
let btn_two = document.querySelector(".btn_two");
let btn_three = document.querySelector(".btn_three");

btn_one.addEventListener("click", function () {
        Box.removeClass("box_two");
        Box.removeClass("box_three");
})

btn_two.addEventListener("click", function () {
        Box.addClass("box_two");
        Box.removeClass("box_three");
})

btn_three.addEventListener("click", function () {
        Box.addClass("box_three");
        Box.removeClass("box_two");
})

.main-BOX {
    box-shadow: 0 0 4px #000;
    width: 500px;
    height: auto;
    margin: 3rem auto 5rem;
    padding: 10px;
}

.btn_one,
.btn_two,
.btn_three {
    font-size: 35px;
    background: #93ff8a;
    color: #f87070;
    border: none;
    padding: 10px;
    margin: 15px;
    border-radius: 50%;
    cursor: pointer;
}

.box {
    width: 90%;
    height: 190px;
    box-shadow: 0 0 5px #000;
    background: #61cc8b;
    margin: 25px;
    border-radius: 5px;
}

.box_two {
    width: 30%;
    height: 240px;
    box-shadow: 0 0 5px #3add89;
    background: #2572e9;
}

.box_three {
    width: 90%;
    height: 70px;
    box-shadow: 0 0 5px #a2dd3a;
    background: #e925dd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="main-BOX">

        <button class="btn_one">1</button>
        <button class="btn_two">2</button>
        <button class="btn_three">3</button>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

        <div class="box"></div>

    </section>

编辑

下面的版本简化了click事件侦听器，不使用JQuery，并使用data属性而不是类来分配样式。

let Box = document.querySelectorAll('.box'),
  button = document.querySelectorAll('.btn');

// For each button
button.forEach(btn => { // arrow function btn is the button that was clicked
  btn.addEventListener('click', (e) => { // e is the event of the listener.
    // For each box
    Box.forEach(box => { // the box element
      // Set the data-size attribute of the box to the content of the data-num attribute of the button that was clicked.
      box.setAttribute('data-size', e.target.dataset.num);
    });
  });
});

.main-BOX {
  box-shadow: 0 0 4px #000;
  width: 500px;
  height: auto;
  margin: 3rem auto 5rem;
  padding: 10px;
}

.btn {
  font-size: 35px;
  background: #93ff8a;
  color: #f87070;
  border: none;
  padding: 10px;
  margin: 15px;
  border-radius: 50%;
  cursor: pointer;
}

.box,
[data-size="one"] {
  width: 90%;
  height: 190px;
  box-shadow: 0 0 5px #000;
  background: #61cc8b;
  margin: 25px;
  border-radius: 5px;
  transition: all .3s ease;
}

.box[data-size="two"] {
  width: 30%;
  height: 240px;
  box-shadow: 0 0 5px #3add89;
  background: #2572e9;
}

.box[data-size="three"] {
  width: 90%;
  height: 70px;
  box-shadow: 0 0 5px #a2dd3a;
  background: #e925dd;
}

<section class="main-BOX">

  <button class="btn" data-num="one">1</button>
  <button class="btn" data-num="two">2</button>
  <button class="btn" data-num="three">3</button>

  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>

</section>

我希望这能给予你一个起点。
下面是我使用的一个React Hook，它对窗口大小做出React：

import * as React from 'react';

import { Rectangle } from 'utils/globalTypes';

/**
 * This is a React Hook implementation of the window.onresize function.
 * 
 * @param {number} horizontalMargin
 * @param {number} verticalMargin
 * @returns windowSize: Rectangle
 */
export const useWindowSize = (horizontalMargin: number = 0,  verticalMargin: number = 0) => {
  const getWindowSize = React.useCallback(() => {
    const {innerWidth, innerHeight} = window;
    return {width: innerWidth - horizontalMargin, height: innerHeight - verticalMargin};
  }, [horizontalMargin, verticalMargin]);

  const [windowSize, setWindowSize] = React.useState<Rectangle>(getWindowSize());

  React.useEffect(() => {
    const handleWindowResize = () => {
      setWindowSize(getWindowSize());
    };

    window.addEventListener('resize', handleWindowResize);

    return () => {
      window.removeEventListener('resize', handleWindowResize); // Cleanup function
    };
  }, [getWindowSize]);

  return [ windowSize ] as const;
};

P.S.导入的类型是这样的：

export type Rectangle = {
  width: number,
  height: number
};

我知道你没有提到React，但希望代码仍然有帮助。