使填充左，填充右响应

Question

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

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

谢谢

Answer 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... 例如在 bootstrap 中您使用 576px、768px、992px、1200px 和1400 像素参见 the docs, in tailwinds (see the docs) 640 像素、768 像素、1024 像素、1280 像素和 1576 像素

使填充左，填充右响应

Make padding-left ,padding-right responsive

css

sass

responsive

angular