如何在CSS中为不同屏幕大小制作动态按钮？

Question

这些按钮应该动态地适应我的网站，如果它是一个平板电脑或移动屏幕大小。目前，它的裁剪非常难看，因为您可以看到这里，但我想不出一个解决方案。

#signup  input {
font-size: 16px;
border: 3px;
border-radius: 5px;
height: 40px;
width: 300px;
text-align: center;}

#signup .button {
font-size: 16px;
padding: 10px 20px 20px 20px;
border-radius: 5px;
margin: 0 auto;
width: 300px;
background-image: linear-gradient(to right, #008A74 , #9f0f44);}

也许这很容易，但我想不出来。事先非常感谢！

国王问好，厨艺

Answer 1

我不认为这与您的输入或.button CSS有任何关系。看起来像集装箱(#注册？)在宽度上受到限制。尝试在浏览器中打开dev工具，并检查计算过的属性是否注册。

Answer 2

@media only screen and (max-width: 400px) {
    #signup .button ,#signup input {
        width: auto;
    }
}