Question

我正在创建一个将在浏览器和移动设备上使用的Web应用程序。我的输入字段当前设置为屏幕的80％，以便为稍后要插入的图标留出空间。

我的问题是虽然80％在移动设备上看起来很棒[1]而且只为图标留下了足够的空间，但是在浏览器[2]中看起来很糟糕且空间过大。增加百分比会修复浏览器，但相反会破坏移动设备等。

[1]

[2]

如何指定我想要留下一定数量的屏幕来插入图标，但是仍然希望输入表单根据屏幕的大小进行拉伸/缩小？

Answer 1

使用calc()：

很容易

.box {
    width: calc(100% - 30px);
}

这假设您想要留出30px的空间。

Answer 2

使用max-width值设置“最大宽度”，如下所示：

`max-width: 300px`

条形图为80％但不大于300px。