在小屏幕尺寸中调整徽标大小不起作用答案

【问题标题】：Resizing logo in small screen sizes not working在小屏幕尺寸中调整徽标大小不起作用
【发布时间】：2014-08-14 12:19:42
【问题描述】：

I have a website here 为朋友和我的生活我不知道如何将徽标调整为宽度为 300 像素。我可以调整 .site-title 的大小就好了，但这不会调整徽标的大小，而且我没有 img 标签可以工作，因为它已被设置为 wordpress 的标题图像。

一旦屏幕尺寸达到 400 像素，我无法找到正确的 css 语句来获取该徽标以调整其大小。

HTML

<div class="wrap">
 <div class="title-area">
  <p itemprop="headline" class="site-title">
   <a title="Insideout Fitness" href="http://ambergoodwindraft.com/insideoutfitnessdraft/">Insideout Fitness</a>
  </p>
 </div>
</div>

CSS -- 很难显示 css，因为有些是我的，有些是来自 wordpress 主题的。

.header-image .site-title a {
    height: 130px;
    margin: 1em 0;
    max-width: 417px;
}

我认为用这种方法会起作用，但它没有

@media only screen and (max-width: 320px) {

    .header-image .site-header .title-area .site-title a {
        background-size: contain !important;
    }

}

感谢任何帮助。

【问题讨论】：

标签： css wordpress mobile

【解决方案1】：

试试这个

@media only screen and (max-width: 320px) {
    .header-image .site-title a {
           background-size:contain!important;            
           height: auto !important;
           margin: 0;
          max-width: 417px;
          padding: 11% 0;
    }
}

就我而言，当涉及到响应式时，我通常在 logo 中使用 img，因为 img 显示的方式很流畅。您在锚点中设置图像的背景，根据我的经验，很难让您的徽标以流畅的方式显示，但只需尝试我的代码。让我知道输出。

【讨论】：

【解决方案2】：

从您网站的head 中取出样式；这将覆盖您放入样式表中的任何内容。在 style.css 中你会想要这样的东西：

.site-title a {
    background: url("http://ambergoodwindraft.com/insideoutfitnessdraft/wp-content/uploads/2014/02/insideout-fitness-logo.png") no-repeat 0 0 / 300px auto;
}

当然，如果您只希望它在移动设备上的宽度为 300 像素，则需要将其放入媒体查询中。否则……为什么不把图片调整到合适的大小，然后重新上传呢？

【讨论】：