时间戳

首页 > 解决方案 > 使 padding-left , padding-right 响应式

css - 使 padding-left , padding-right 响应式

问题描述

我想在下面的代码中做出padding-left响应padding-right：

<ng-template #addnote>
    <div class="styleaddnote">
      <button class="addnotebtn" (click)="openDialog()">ADD NOTE</button>
    </div>
</ng-template>

我已经编写了这段代码，我为所有人编写了一个新代码@media，但效果不佳。@media左右之间的距离在某些宽度上是不正确的。我想在中心设置一个按钮。

@media(min-width:600px){
  .styleaddnote {
  text-align: left;
  margin-left: -5%;
  width:50%;
  padding: 0 5% 0 10%;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 15%;
  padding-left: 0%;
  }
}
@media(min-width:700px){
  .styleaddnote {
  text-align: left;
  margin-left: 5%;
  width:50%;
  padding: 0 5% 0 10%;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 15%;
  padding-left: 0%;
  }
}
@media(min-width:800px){
  .styleaddnote {
  text-align: left;
  margin-left: 10%;
  width:50%;
  padding: 0 5% 0 10%;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 15%;
  padding-left: 0%;
  }
}
@media(min-width:900px){
  .styleaddnote {
  text-align: left;
  margin-left: 15%;
  width:50%;
  padding: 0 5% 0 10%;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 15%;
  padding-left: 0%;
  }
}

拜托，你能和我分享一下如何让它响应吗？我认为这是有办法的，但我没有找到一种行之有效的好方法。

谢谢

标签： cssangularsassresponsive

解决方案

三个注意事项：

1.-如果你使用padding:0 5% 0 10% 不使用padding-top:..padding-bottom:...

2.-您首先通过缺陷指示填充-对于较少的屏幕分辨率-没有媒体

.styleaddnote {
  text-align: left;
  margin-left: 15%;
  width:50%;
  padding: 0 5% 0 10%;
  }

在为屏幕尺寸的每次更改编写@media-only the changes over the before css rule- 之后：

@media(min-width:600px){
  .styleaddnote {
     padding: 0 5% 0 10%;
  }
}
@media(min-width:700px){
  .styleaddnote {
     padding: 0 15% 0 12%;
  }
}
...

3.-通常您不使用任意“断点”-您使用 600px、700px、800px ... 例如，在引导程序中，您使用 576px、768px、992px、1200px 和 1400px 参见文档，顺风（参见文档）640px 、768px、1024px、1280px 和 1576px

推荐阅读