Question

我尝试在max-width和margin-left设置为margin-right的按钮上使用28px。

当我的网站缩小移动时，此按钮仍保留其边距并在屏幕外移动。我该如何解决这个问题？

这是我的按钮CSS：

.button {
  border: 1px solid;
  border-color: #5094CF;
  background: #FFFFFF;
  width: 450px;
  max-width: 100%;
  height: 48px;
  margin: 0 28px 0 28px;
}

Answer 1

您需要所有分辨率的媒体查询，例如：

@media (max-width: 600px) {
  .box {
      margin:  0;
  }
}

@media (max-width: 400px) {
  .box {
      margin: 10px;
  }
}

不同的边距取决于客户的分辨率。

祝你好运

Answer 2

对您的问题有一个非常简单的解决方法，试试这个：

@media all and (max-width: 658px) { // for mobile devices 
    .button{
        // your preferred styling properties for displaying in mobile devices
     }
}

具有margin属性的CSS按钮的最大宽度

2 个答案: