Question

我知道这是一个简单的解决方法，但我对如何真正解决问题毫无头绪。这很奇怪。在桌面版本上，我的徽标比我想要的要小，因为在移动设备上它太大了。

这是我的css代码：

#logo{
    height:380%;
    margin-top: -35px;
}

这是我的其他设备的元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">

我也研究了一下，看到我需要一个@media？这里也是图片：

这是我要求的完整css代码：

        .navbar-text pull-left{
    color:#000000;
    text-decoration:none;
}
.navbar-text p{
    color:inherit;
    text-decoration:none;
}

.navbar{
    border: 0px;
}

#logo{
    height:500%;
    margin-top: -35px;
}

@media only screen and (min-width: 640px) { 
#logo {
     height:150%; // Change this value
     margin-top: -35px;
}

}

Answer 1

我会用像素或rem中的大小替换380％。移动屏幕现在具有非常高的像素密度。以下是有关如何制作自适应徽标https://getflywheel.com/layout/css-sprites-make-your-logo-responsive/

的一个很好的示例

Answer 2

CSS3 Media Query是您应该寻找的。假设您所需的移动宽度为640px，请将以下内容放入CSS中，以便在移动视图中以不同方式显示它。

@media (min-width: 640px) { 
    #logo {
         height:150%; // Change this value to adjust logo size
         margin-top: -35px; // Change this value to vertically move your logo.
    }
}

Answer 3

~~您可以使用media queries~~

实现等效的 max-font-size
这个想法相对简单。

您将字体大小设置为20vw - 请阅读vw here - 因为它已经过了一个标志。

一旦查看器大小，您将使用固定大小覆盖font-size 超出某一点 - 我的示例中的450px。

最终结果是字体会根据屏幕尺寸进行调整并具有响应性。

工作示例：

＆＃13;
＆＃13;
#logo { font-size: 20vw; text-align: center; } @media screen and (min-width: 450px) { #logo { font-size: 83px; } }
＆＃13;
<div id="logo">"Quotin"</div>
＆＃13;
＆＃13;
＆＃13;

修改：

我刚刚意识到您的徽标是一张图片。

我在Photoshop 中删除了徽标上多余的空白区域，因为在这种情况下，这比使用负边距要容易得多。

这应该适用于移动设备和桌面设备，并且无需媒体查询即可快速响应

工作示例：

＆＃13;

#logo {
  margin: 0 auto;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

＆＃13;

<a class="navbar-brand" href="http://www.quotin.co"><img class="img-responsive" id="logo" src="https://image.ibb.co/dTt4xv/8DL1n.png"></a>

＆＃13;

Answer 4

你的代码都很好。只需将min-width更改为max-width，即可完成设置。

@media only screen and (max-width: 640px) {
    #logo { height: 150%; };
}

现在，你所说的是：

#logo { height: 500%; } - 为徽标提供500％的高度。
@media ..(min-width: 640px) {#logo {height: 150%;} } - 如果屏幕尺寸为最小 640px宽（或更宽......），请将高度设为150％。

我很惊讶以前没有人注意到这一点。

我的徽标在桌面上很棒，但在移动设备上它太大了

4 个答案: