使用媒体查询更改 CSS 按钮有困难

Question

这应该是基本的，但我正在努力：

我的标记很简单：

<p>
    <a href="" class="button">sort / search all events in United States</a>
</p>

这个 CSS 效果很好 - 但是 - 在小屏幕上文本太多所以我只是想减小字体的大小，应该很简单但我无法理解上班。

.button {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0px;
  font-family:inherit;
  color: #393939 !important;
  font-size: 16px;
  background: #c8d6e5;
  padding: 8px 18px 8px 18px;
  border: solid #ffffff 2px;
  text-decoration: none;
  text-transform: uppercase;
}

.button:hover {
  background: #9facb5;
  text-decoration: none;
}
        
@media screen and (min-width: 1251px) {
 .button {
font-size: 12px !important;
 }
}

我是不是做错了什么？

谢谢

Answer 1

@media screen and (min-width: 1251px) 将仅应用 1251px 宽度 及以上 的样式。如果您只想将样式应用于较小的屏幕，则需要改用 max-width，这会产生相反的效果。

或者，您可以在没有媒体查询的情况下默认应用较小的字体大小，然后使用 min-width 查询增加较大宽度的大小。

使用媒体查询更改 CSS 按钮有困难

Difficulty with changing CSS button with media query

css

media-queries