Question

我正在为一个非常简单的问题寻求帮助：

我在产品页面上有一个AddtoCart按钮，像素宽度为475像素（参见下面的代码）：

#AddToCart {

width: 475px;

}

此尺寸在桌面浏览器中非常完美。但是，在智能手机（Iphone）上查看时，按钮不适合屏幕（宽屏）。如果显示器的宽度小于475像素，有没有办法自动将按钮的宽度缩小到显示器的最大宽度？

非常感谢。

Answer 1

您可以使用meta-queries创建自适应设计，我认为这是多支持显示的最佳解决方案。

您还可以使用相对尺寸：

width : 20%;

它将相对于容器的大小进行调整。

Answer 2

您可以使用vw（例如90vw将始终是视口宽度的90％）以及媒体查询来更改不同断点处的宽度。

@media screen and (max-width: 768px) { INSERT STYLE FOR 0-768px SCREENS}

@media screen and (min-width: 769px) { INSERT STYLE FOR 769px+ SCREENS}