我的按钮的文字没有调整大小？

Question

我的按钮有以下CSS代码。当我调整窗口大小时，文本落在chrome的div之外。 （使用移动布局）

http://www.syntra-limburg.be/voltijds-praktijkleren

a.syntra-green-button {
    background-color: #6faf3c;
    border: 1px solid #9dcc77;
    color: white;
    padding: 15px 2%;
    margin: 5px auto 0px;
    position: relative;
    font-size: 1.35em;
    width: 190px;
    max-width: 100%;
    text-align: center; 
    display: block;
}

我使用以下代码修复它，但我想知道是否有更优雅的解决方案？我不明白为什么会这样。

.responsive-layout-mobile a.syntra-green-button {
    font-size: 1em;
}

Answer 1

尝试font-size％font-size: 115%;

<强> CSS

a.syntra-green-button {
  background-color: #6faf3c;
  border: 1px solid #9dcc77;
  color: white;
  padding: 15px 2%;
  margin: 5px auto 0px;
  position: relative;
  font-size: 115%;
  width: 190px;
  text-align: center;
  display: block;
}

Answer 2

将宽度设置为自动。你限制了它溢出的原因

Answer 3

您可以使用以下内容更改按钮的宽度。首先将宽度更改为基于桌面样式显示的百分比：

width: 30%;

但是还要为适合整个单词的响应设备调整大小时的最小宽度：

min-width: 200px;

所以完整的课程将是：

a.syntra-green-button {
    background-color: #6faf3c;
    border: 1px solid #9dcc77;
    color: white;
    padding: 15px 2%;
    margin: 5px auto 0px;
    position: relative;
    font-size: 1.35em;
    width: 200px;
    min-width: 30%;
    max-width: 100%;
    text-align: center; 
    display: block;
}

请参阅此JSFiddle：http://jsfiddle.net/8tBQ3/

Answer 4

.responsive-layout-mobile a.syntra-green-button {
    font-size: 100%;
}