自动调整大小按钮以实现响应式设计

Question

有没有办法让按钮自动调整大小以适应其容器，以便进行响应式设计？

我认为如果有一种方法，而不是基于媒体查询（=更少的代码），那就更好了

希望图片能帮到你。这是按钮的CSS

.formButtonfront {
 width: auto;
border:1px solid gray;
border-radius:7%;
float:right;
font-size:0.875;
 }

浏览器是笔记本电脑中的Chrome，只需缩小尺寸

我想要灰色按钮（放在图像后面）以适合白色容器

提前致谢

PS关于浮动：我在页脚中有一个clear:both;。即使我删除浮动，结果也一样。

更新 这是一个jsfiddle

Answer 1

因此，您不需要display: block或float: none，而是max-width

.formButtonfront {
  border:1px solid gray;
  border-radius:7%;
  font-size:0.875;
  word-wrap: break-word;
  width: 100px; // only for IE8
  max-width: 100%;
 }

看看这个fiddle（我减少内容的大小以查看它的外观）

Answer 2

为该按钮设置float: none和display: block。

它将按钮作为容器并适合父框。

我认为它会对你有所帮助。

Answer 3

button{
  width: 250px;
  max-width: 100%;
  padding: 15px;
}

<button>
  Button
</button>