大佬教程收集整理的这篇文章主要介绍了使 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%;
}
}
拜托，你能和我分享一下如何让它响应吗？我认为这是一种方法，但我没有找到一种很好的方法。
谢谢
三个注意事项：
1.-如果你使用 padding:0 5% 0 10% not 使用 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，请参阅{{3} }，顺风（参见the docs）640px、768px、1024px、1280px和1576px
以上是大佬教程为你收集整理的使 padding-left , padding-right 响应全部内容，希望文章能够帮你解决使 padding-left , padding-right 响应所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。