如何更改我的 css，以便我的不同 div 在具有不同分辨率時不會重疊？

Question

問題是只要我的瀏覽器處於全屏狀態，我的 div 就會正確顯示，但是當我縮小 div 重疊的分辨率時，我如何獲得彼此的相對定位

#curve_temp {
position: absolute;
top: 300px;
left: 30px;
margin-right: 100px;
}
#curve_vibr {
position: absolute;
top: 300px;
right: 220px;
}

#curve_laut {
position: absolute;
top: 600px;
left: 30px;
padding-right: 100px;
}

#curve_rpm {
position: absolute;
top: 600px;
right: 220px;
}

#curve_quali {
position: absolute;
top: 900px;
left: 30px;
padding-right: 100px;
}


            <div class="user-dashboard">
                <h1>Hallo, User!</h1>
                <div id="logo_eg">
                <center><img src="logo.png" alt="engineguru_logo" class="our_logo" width="476" height="191"></center></div>
                <div id="curve_quali" style="width: 535px; height: 268px; vertical-align: right" ></div>
                <div id="curve_rpm" style="width: 535px; height: 268px; vertical-align: right" ></div>
                <div id="curve_laut" style="width: 535px; height: 268px; vertical-align: right" ></div>
                <div id="curve_temp" style="width: 535px; height: 268px; vertical-align: right" ></div>
                <div id="curve_vibr" style="width: 535px; height: 268px; vertical-align: right" ></div>
                <div id="flaticon"><a href="https://www.flaticon.com/free-icons/home" title="home icons">Home icons created by Freepik - Flaticon</a></div>
            </div>

Answer 1

這可能會奏效。 我會使用媒體查詢來設置所需的屏幕大小斷點。 此外，使用rem or em代替px可能會有所幫助，因為它們有助於在屏幕尺寸縮放中進行響應式設計。

您可以將 css 樣式設置在兩個寬度之間，例如使用平板電腦：

@media (min-width: 475px) and (max-width: 768px)
{
     /* Insert screen size styles for these breakpoints here. */
}

或者使用將樣式指定到特定屏幕尺寸尺寸的設置：

@media only screen and (max-width: 320px)
/* For mobile phones: */
{
/* Insert screen size styles for these breakpoints here. */
}

使用上面共享的代碼，它可能看起來像這樣：

@media only screen and (max-width: 320px){
/* For mobile phones: */

   /* Adjust values to the appropriate px dimension. */
   #curve_temp {
     position: absolute;
     top: 300px;
     left: 30px;
     margin-right: 100px;
  }

}

@media only screen and (max-width: 768px){
/* For tablet screens: */
    
       /* Adjust values to the appropriate px dimension. */
       #curve_temp {
         position: absolute;
         top: 300px;
         left: 30px;
         margin-right: 100px;
      }
}

@media only screen and (max-width: 1920px){
/* For desktop screen: */
       
       /* Adjust values to the appropriate px dimension. */

       #curve_temp {
       position: absolute;
       top: 300px;
       left: 30px;
       margin-right: 100px;
     }
 }

Answer 2

首先，使用絕對定位要嚴格得多，並且很難編寫能夠很好地響應不斷變化的內容的布局。 更多信息在這里
您可以使用 flexbox，將您想要正確響應的 div 放入 flex-container 中，如下所示。
html:

<div class="flex-container">
    /*put your divs here*/
</div>

CSS：

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

除了間距操作之外，您還可以使用這些 flexbox 屬性獲得所需的設計。
為多個 div 賦予相同樣式的更好方法是賦予它們相同的類並使用 css 對其進行樣式設置。
你的舊代碼：

<div id="curve_quali" style="width: 535px; height: 268px; vertical-align: right" ></div>
      <div id="curve_rpm" style="width: 535px; height: 268px; vertical-align: right" ></div>
      <div id="curve_laut" style="width: 535px; height: 268px; vertical-align: right" ></div>
      <div id="curve_temp" style="width: 535px; height: 268px; vertical-align: right" ></div>
      <div id="curve_vibr" style="width: 535px; height: 268px; vertical-align: right" ></div>

更好的編碼方式：

<div id="curve_quali" class="class_name" ></div>
<div id="curve_rpm" class="class_name"</div>
<div id="curve_laut" class="class_name"</div>
<div id="curve_temp" class="class_name"</div>
<div id="curve_vibr" class="class_name"</div>

您重寫您在樣式屬性中提供的相同樣式，如下所示：

.class_name {
/* your styling over here */
}