如何使圖像橫幅和兩個 div 卡響應每個 sreensize

Question

我有一個圖像橫幅，上面有一些文本和按鈕，旁邊有兩個小部件，以 flex 形式顯示（觀看圖像以供參考）。 我希望它們在屏幕尺寸改變時做出響應。

<div className="tabs">
          <div className="tabs-container">
            <img src={MainBG} alt="background" className="banner-img" />
            <div className="top-text">
              <div>
                <h1>
                  Track Crypto Activity <br /> For Smarter Trading
                </h1>
                <button className="join-button"> Join Now</button>
                <button className="academy-button"> Crypto Academy</button>
              </div>
            </div>
          </div>
          <div className="widgets">
            <TechnicalAnalysis
              colorTheme="dark"
              width="280"
              height="305"
              symbol="BITSTAMP:BTCUSD"
            />
            <TechnicalAnalysis
              colorTheme="dark"
              width="280"
              height="305"
              symbol="BINANCE:ETHUSDT"
            />
          </div>
          

Ui 在一個屏幕尺寸上的表現

這是當前的 CSS：

.tabs {
  display: flex;
  overflow: scroll;
  width: 100%;
}
.banner-img {
  width: 95%;
}
.tabs-container {
  position: relative;
  margin-top: 20px;
  margin-left: 10px;
}

.top-text {
  position: absolute;
  margin-left: 30px;
  display: flex;
  justify-content: space-around;
  color: white;
  top: 50px;
}

.join-button {
  background-color: #bb46e2;
  cursor: pointer;
  color: white;
  padding: 10px;
  width: 90px;
  border-radius: 10px;
  border: none;
}

.academy-button {
  background-color: transparent;
  cursor: pointer;
  padding: 10px;
  border: 1px solid white;
  color: white;
  border-radius: 10px;
  margin-left: 15px;
}

.academy-button:hover {
  background-color: white;
  color: #bb46e2;
}

.widgets {
  display: flex;
  flex-direction: row;
  width: 50%;
  justify-content: space-between;
  margin-top: 20px;
  margin-right: 30px;
}

如何使這些響應所有屏幕尺寸？

Answer 1

您可以使用媒體查詢。 您可以使用它們根據屏幕尺寸更改元素的樣式。 閱讀此處的文檔。