Question

例如，我希望p在左右两侧填充200px。它在大屏幕上看起来很好，但在移动设备上它有太多的填充。我该如何解决这个问题？

HTML：

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

CSS：

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

Answer 1

在此处阅读媒体查询：https://www.w3schools.com/css/css3_mediaqueries.asp

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以使用百分比而不是最好写的媒体查询

我个人使用rem作为单位而不是px（我个人选择）

在媒体查询中，它可以指定设备的宽度，即最大宽度或最小宽度，即

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

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

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

2 个答案: