在CSS中创建基于百分比的移动和Web之间的大小调整

Question

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

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

[1]

[2]

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

Answer 1

这很简单calc():

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

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