html - 我的 Logo 在桌面上很棒，但在移动设备上太大了

Question

我知道这是一个简单的修复，但我对如何真正解决这个问题一无所知。有点奇怪。在桌面版上，我的 Logo 比我想要的要小，因为在移动版上它太大了。

这是我的 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

您可以使用 media queries 实现与 max-font-size 等效的功能

这个想法比较简单。

1. 您将字体大小设置为 20vw - 阅读有关 vw 的信息 here - 因为它是一个标志。
2. 一旦查看器大小，您就用固定大小覆盖font-size超过某个点 - 450px 在我下面的例子中。

最终结果是您的字体会根据屏幕大小进行调整并且会响应。

工作示例:

#logo {
  font-size: 20vw;
  text-align: center;
}

@media screen and (min-width: 450px) {
  #logo {
    font-size: 83px;
  }
}

<div id="logo">"Quotin"</div>

编辑:

我刚刚意识到你的标志是一张图片。

我在 Photoshop 中修剪了 Logo 上多余的空白区域，因为在这种情况下，这比弄乱负边距要容易得多。

这应该适用于移动和桌面屏幕，并且响应不需要媒体查询

工作示例:

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

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