时间戳

首页 > 解决方案 > 使用媒体查询更改 CSS 按钮的困难

css - 使用媒体查询更改 CSS 按钮的困难

问题描述

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

我的标记很简单：

<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;
 }
}

我在这里做明显错误的事情吗？

谢谢

标签： cssmedia-queries

解决方案

@media screen and (min-width: 1251px)只会在1251pxwide和 up应用样式。如果您只想将样式应用于较小的屏幕，则需要改为使用max-width，这会产生相反的效果。

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

推荐阅读