响应式设计的自动调整按钮大小答案

【问题标题】：auto-resize buttons for responsive design响应式设计的自动调整按钮大小
【发布时间】：2019-01-23 02:56:23
【问题描述】：

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

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

希望图片对您有所帮助。这是按钮的 CSS

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

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

我希望灰色按钮（放置在图像之后）适合白色容器

提前致谢

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

更新这是jsfiddle

【问题讨论】：

能否为我们提供父级的 CSS 和 html 以便更准确地回答您？
@thomasstephn 我更新了我的问题，添加了一个小提琴

标签： css resize responsive-design

【解决方案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（我缩小了内容的大小来看看它的样子）

【讨论】：

谢谢。最后一件事：如果我没记错的话，IEmax-width。有什么建议吗？
这不是真正的 IE8 问题，因为 IE8 确实支持 max-width 属性，但只有在首先给定宽度时才支持。所以试试width: 100%; max-width: 25em; 之类的东西。我编辑了我的答案
您的分析器不错，但老实说，word-wrap 在美学上并不是一个好主意。使言语失控。我找到了这个http://stackoverflow.com/questions/11798926/tweaking-performance-of-elegant-solution-to-text-resize-for-fluid-responsive-des，我尝试做类似onresize=onload=function(){document.getElementById("button").style.fontSize=document.getElementsByClassName("container").innerWidth+"px"}; 与width:auto 结合的事情，但无法让它工作......
盒子正在调整大小，这是您的问题，之后我同意这是一个设计决定。自动换行、小字体或文本溢出：省略号

【解决方案2】：

为该按钮制作float: none 和display: block。

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

我想它会对你有所帮助。

【讨论】：

感谢分析器，但很抱歉，这根本没有帮助。按钮仍在容器外
1.删除白框的高度属性。 2. 也许你按钮上的文字看起来比容器的宽度大得多？请尝试word-wrap: break-word 和width: 100%。
word-wrap 有点帮助。但是，width:100% 在浏览器未缩小时会创建一个巨大的按钮。如果我把width:40% 放在浏览器缩小时按钮不大，但字母在另一个上面......无论如何，我添加了一个链接到我的问题......

【解决方案3】：

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

<button>
  Button
</button>

【讨论】：