使 padding-left , padding-right 响应答案

【问题标题】：Make padding-left ,padding-right responsive使 padding-left , padding-right 响应
【发布时间】：2021-08-19 10:18:31
【问题描述】：

我想在下面的代码中响应 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%;
  }
}

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

谢谢

【问题讨论】：

对于宽度小于 600 像素的设备，您设置了什么？如果填充可以用 % 表示，为什么还要改变填充呢？您的按钮是否以响应单位定义（例如 %）？

标签： css angular sass responsive

【解决方案1】：

三个注意事项：

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 之后-仅更改之前的css规则-对于屏幕尺寸的每次更改：

@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 参见the docs，顺风（见docs）640px、768px、1024px、1280px和1576px

【讨论】：