html - 基于窗口大小 CSS 的约束

Question

调整窗口大小时遇到​​问题。有人可以帮我吗。我是 css 新手，希望页面的右上角能够相应调整。也许你可以指出我做错的事情的正确方向。

链接到下面的布局。

当浏览器窗口打开的尺寸小于我当前的限制时，我不希望内容被剪切掉。

https://bullishtradeweb.firebaseapp.com/chatroom.html

.chart {
  display: inline-block;
  position: absolute;
  bottom: 0px;
  right: 0px;


}



#searchTicker {

  width: 100%;
  height: 100%;

  border-radius: 12px;
  border-color: black;

  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 200px 450px 0 0;
  width: 200px;
  height: 50px;
  font-size: large;

}

#searchButton {

  width: 100%;
  height: 100%;
  border-radius: 12px;
  background-color: #008CBA;
  border: none;
  color: white;


  display: inline-block;
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 200px 380px 0 0;
  width: 70px;
  height: 52px;
  font-size: large;

}

#topFive1 {


    left: 50%;

    background-color: #000000;
    border: none;
    color: white;
    display: inline-block;
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 90px 1500px 0 70px;
    width: 110px;
    height: 55px;
    font-size: large;
}

<div class="wrapper">
        <input type="button" class="buttonCircle" id="topFive1" onclick=topFiveSearch1() ></input>
        <input type="button" class="buttonCircle" id="topFive2" onclick=topFiveSearch2() ></input>
        <input type="button" class="buttonCircle" id="topFive3" onclick=topFiveSearch3() ></input>
        <input type="button" class="buttonCircle" id="topFive4" onclick=topFiveSearch4() ></input>
        <input type="button" class="buttonCircle" id="topFive5" onclick=topFiveSearch5() ></input>

    </div>

  <input type="text" id="searchTicker" placeholder="Ticker Symbol..." required>
  <button type="button" id="searchButton" class="icon" onclick=searchButtonPressed()><i class="fa fa-search"></i></button>
  

Answer 1

随着屏幕宽度变小，使用媒体查询会更改样式，例如下面假设为 1000 像素，您可能会将一些元素挤压在一起，以便 CSS 可以监视屏幕宽度并根据屏幕宽度更新样式。

将你的元素，低于 1000px 我们想要更改为 100% 宽度，这就是我们的做法:

@media (max-width: 1000px){
  main{
    width: 100%;
  }
} 

您必须在每个断点处添加要更改的所有样式