html - 响应式按钮添加到购物车的问题（调整页面宽度）

Question

我正在尝试调整添加到购物车按钮。

这是对的：

但是当我更换设备时，宽度仍然相同；

我尝试使用：

box-sizing: border-box;

但是出了点问题。谁能帮我？

.sparsh-buynow-view #product-sparsh-buynow-button {
  margin-bottom: 15px;
  min-width: 500px;
  line-height: 2.2rem;
  height: 45px;
  padding: 5px 17px;
  font-size: 1.8rem;
  box-sizing: border-box;
}

<div class="sparsh-buynow-view">
  <button type="submit" title="<?= /* @noEscape */ __($buttonTitle) ?>" 
  class="action primary" id="product-sparsh-buynow-button" 
  data-mage-init='{"Sparsh_BuyNow/js/buy-now": {"form": "#product_addtocart_form" }}'>
    <span><?= /* @noEscape */ __($buttonTitle) ?></span>
  </button>
</div>

标签： htmlcss

Answer 1

尝试使用 vw 而不是 px 作为最小宽度。

.sparsh-buynow-view #product-sparsh-buynow-button {
  margin-bottom: 15px;
  min-width: 50vw;
  line-height: 2.2rem;
  height: 45px;
  padding: 5px 17px;
  font-size: 1.8rem;
  box-sizing: border-box;
}