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

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; 
      } 
     }