，如何在大屏幕和小屏幕中保持「相同」的填充？

Question

例如，我想要p在左側和右側有200px填充。它在大屏幕上看起來很好，但在移動設備上它有太多的填充。我怎麼解決這個問題？

HTML：這裏

.mystyle p { 
    padding: 0 200px; 
    text-align: center; 
} 

Answer 1

閱讀有關媒體查詢：

<div class="row"> 
    <div class="col-lg-12 mystyle"> 
    <p> here is text </p> 
    </div> 
</div> 

CSS https://www.w3schools.com/css/css3_mediaqueries.asp

.mystyle p { 
 
    padding: 0 200px; 
 
    text-align: center; 
 
} 
 

 
@media screen and (max-width: 480px) { 
 
    .mystyle p { 
 
    padding: 0 20px; 
 
    text-align: center; 
 
    } 
 
}

<div class="row"> 
 
    <div class="col-lg-12 mystyle"> 
 
    <p> here is text </p> 
 
    </div> 
 
</div>

Answer 2

你可以用百分比，而不是最好會寫媒體查詢

我個人使用REM爲單位，而不是PX（我個人的選擇）

在媒體查詢

它作爲指定設備無論是最大寬度的寬度或最小寬度即

@media (max-width: 767px) { 
      .visible-xs { 
       display: inline-block !important; 
      } 

      .block { 
       display: block !important; 
       width: 100%; 
       height: 1px !important; 
      } 
     }