# CSS 增加 logo 和 header 的高度，桌面到移动端视图

**URL:** <https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064>\
**Category:** Development\
**Tags:** css\
**Created:** [2024年一月26日 15:42 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064 "2024-01-26T15:42:16Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![selfaware](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@selfaware](https://meta.discourse.org/u/selfaware)\
**Post date:** [2024年一月26日 15:42 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/1 "2024-01-26T15:42:17Z")

</div>

从我的 PC 桌面，通过 Firefox 中的检查器，控制徽标高度的 CSS 标签是：

```css
.d-header .title {
  --d-logo-height: 4em;
}

```

但是，我注意到，当我将此 CSS 标签插入桌面 CSS 编辑器中的默认主题时，它既不会改变我 PC 桌面上的徽标高度，也不会改变手机上的徽标高度。  
然而，如果我将相同的 CSS 代码插入移动设备部分，它不仅会改变我 PC 桌面上的徽标高度，也会改变手机上的徽标高度。这是 Discourse 的一个错误，还是我遗漏了什么？

---

<div class="post-metadata">

**Author:** ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)\
**Post date:** [2024年一月26日 16:12 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/2 "2024-01-26T16:12:41Z")

</div>

您好，

以防万一，您把这个 CSS 放在哪里了？

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2024年一月26日 16:56 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/3 "2024-01-26T16:56:52Z")

</div>

在寻求帮助时，最好能更好地阐述你的请求。这里有很多人都非常乐意提供帮助，但事情的完成方式多种多样，因此清晰的解释对于尽快获得帮助至关重要 🙂

另外，如果你在本地测试，别忘了在网址后附加 `?mobile_view=1`。

---

<div class="post-metadata">

**Author:** ![selfaware](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@selfaware](https://meta.discourse.org/u/selfaware)\
**Post date:** [2024年一月26日 22:32 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/5 "2024-01-26T22:32:54Z")

</div>

从我的 PC 桌面，通过 Firefox 中的检查器，操作徽标高度的 CSS 标签是：

```plaintext
.d-header .title {
  --d-logo-height: 4em;
}

```

但是，我注意到当我将此 CSS 标签插入到桌面 CSS 编辑器中的默认主题时，它既没有改变我在 PC 桌面或手机上看到的徽标高度。  
但是，如果我将相同的 CSS 代码插入到移动设备下，它不仅会改变 PC 桌面的徽标高度，也会改变手机的徽标高度。这是 Discourse 的一个错误，还是我遗漏了什么。

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2024年一月27日 12:15 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/7 "2024-01-27T12:15:08Z")

</div>

我尝试重现您所做的操作，但无法重现此问题：

> [@selfaware](#):
>
> 但是，如果我在移动设备下插入相同的 CSS 代码，它不仅会更改我 PC 桌面上的徽标高度，还会更改手机上的徽标高度。

它能正确更改移动设备，但不会影响桌面。

如果我在编辑器中添加此 CSS，它会按预期在桌面上工作：

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/c/9/cc9557ae32022ae2ce3f6033ae84662c26f1649c.jpeg)

对于移动设备，您只需设置徽标的高度，而不是标题的高度：

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/4/d/d4d71ac87ba3622cd2563c961f5e08907d06c6a9.png)

希望这有帮助。

---

<div class="post-metadata">

**Author:** ![selfaware](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@selfaware](https://meta.discourse.org/u/selfaware)\
**Post date:** [2024年一月27日 16:37 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/8 "2024-01-27T16:37:51Z")

</div>

谢谢，我切换到另一台机器上，一台运行 Ubuntu 22.04（Web 服务器）的机器，桌面 CSS 存储桶中的 CSS 代码渲染正确，所以可能是我的另一台运行 Windows 7 的 PC 桌面上的浏览器问题。  
我确实注意到，在移动 CSS 存储桶中，我似乎仅限于：

```plaintext
.d-header #site-logo {
  height: 3em;
}

```

即使在刷新缓存后，任何试图超过 3em 的尝试都不会增加我手机 GS23 上的徽标高度。

有什么想法吗？

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2024年一月29日 06:40 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/9 "2024-01-29T06:40:00Z")

</div>

是的，尝试取消设置 logo 上的 `max-width`，这样就可以解除任何限制。

---

<div class="post-metadata">

**Author:** ![selfaware](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@selfaware](https://meta.discourse.org/u/selfaware)\
**Post date:** [2024年一月29日 13:38 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/10 "2024-01-29T13:38:53Z")

</div>

感谢您的输入，我在设置中找不到该选项。这是通过 CSS 或 Rails 中的命令行输入完成的吗？如果是，它看起来是怎样的？

---

<div class="post-metadata">

**Author:** ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)\
**Post date:** [2024年一月29日 14:48 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/11 "2024-01-29T14:48:28Z")

</div>

那将是 CSS，如下所示：

```css
.d-header #site-logo {
  max-width: unset;
}

```

如果那不起作用，请添加 `!important`。

---

<div class="post-metadata">

**Author:** ![selfaware](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@selfaware](https://meta.discourse.org/u/selfaware)\
**Post date:** [2024年一月29日 20:34 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/14 "2024-01-29T20:34:02Z")

</div>

感谢您的帮助：

对于那些在我之后来并希望在桌面和移动视图中增大徽标大小的人。  
1）自定义 → 主题 → 默认 → 编辑 CSS/HTML

a）在桌面存储桶中发布：

```plaintext
.d-header {
  height: 5em;
}
.d-header #site-logo {
  height: 5em;
}

```

b）在移动存储桶中发布：

```plaintext
.d-header #site-logo {
  max-width: unset;
}
.d-header #site-logo {
  height: 4em;
}

```

---

<div class="post-metadata">

**Author:** ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)\
**Post date:** [2024年一月29日 20:47 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/15 "2024-01-29T20:47:49Z")

</div>

> [@selfaware](#):
>
> b) 在移动版存储桶中发布：
> 
> ```css
> .d-header #site-logo {
> max-width: unset;
> }
> .d-header #site-logo {
> height: 4em;
> }
> 
> ```

这些可以合并成一条规则：

```css
.d-header #site-logo {
  max-width: unset;
  height: 4em;
}

```

我认为你也可以压缩第一个规则集，但我一时想不起来怎么做。

---

<div class="post-metadata">

**Author:** ![selfaware](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@selfaware](https://meta.discourse.org/u/selfaware)\
**Post date:** [2024年一月30日 22:52 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/16 "2024-01-30T22:52:05Z")

</div>

另外，还有一件事可以帮助添加的是如何减小填充，以便在移动视图中将徽标向左移动——有什么想法吗？

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2024年一月31日 06:45 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/17 "2024-01-31T06:45:25Z")

</div>

```plaintext
.wrap {
  padding-left: 0;
}

```

此时，学习 CSS 入门课程可能是一个好主意，因为：

> [@Discourse](#):
>
> 但是，基本的 HTML 和 CSS 问题不在支持范围内。

您可以在 [dev 类别](https://meta.discourse.org/t/about-the-dev-category/1026) 中阅读更多关于开发您自己的主题的信息。

---

<div class="post-metadata">

**Author:** ![selfaware](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@selfaware](https://meta.discourse.org/u/selfaware)\
**Post date:** [2024年一月31日 12:37 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/19 "2024-01-31T12:37:55Z")

</div>

查理，谢谢你，我很感激。  
我熟悉使用检查器，例如 Firefox，并从中获得了一些解决方案。

您认为为什么 Discourse 的核心功能不包括徽标调整大小？任何网站的品牌推广都至关重要，而在这方面缺乏细微差别令人惊讶。

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2024年一月31日 12:54 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/20 "2024-01-31T12:54:47Z")

</div>

> [@selfaware](#):
>
> 有什么想法可以解释为什么 Logo 操作不属于 Discourse 的核心功能？任何网站的品牌推广都至关重要，在这方面缺乏细微差别令人惊讶。

“Logo 操作”完全是可能的，就像其他所有类型的样式一样，可以在主题和主题组件中进行。  
你只需要学习 HTML/CSS/JS 的基础知识，并通过元（meta）上的大量文档来自己完成，或者你需要找一个可以雇佣的人来为你进行所需的更改。  
后者可以在[市场类别](https://meta.discourse.org/c/marketplace/14)中完成。  
既然你的原始问题已经得到解答，我认为我们可以结束这个话题了。  
祝你的论坛一切顺利。

---

<div class="post-metadata">

**Author:** ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)\
**Post date:** [2024年一月31日 12:56 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/21 "2024-01-31T12:56:14Z")

</div>

我个人不认为公司徽标的大小调整会是论坛平台核心功能的一部分。此外，我们的软件是开源的，我们确实提供了上述支持来帮助您完成此操作。我们还提供了大量关于学习开发自己定制功能的信息。

---

<div class="post-metadata">

**Author:** ![selfaware](https://avatars.discourse-cdn.com/v4/letter/s/a587f6/32.png) [@selfaware](https://meta.discourse.org/u/selfaware)\
**Post date:** [2024年一月31日 16:25 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/24 "2024-01-31T16:25:17Z")

</div>

您好 Charlie，

我所说的“Logo Manipulation”是指在 UI 中更改 Logo 大小的能力。

感谢您的帮助。

---

<div class="post-metadata">

**Author:** ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)\
**Post date:** [2024年三月1日 16:25 UTC](https://meta.discourse.org/t/css-to-increase-height-of-logo-and-header-in-dektop-mobile-view/293064/25 "2024-03-01T16:25:23Z")

</div>

此主题在上次回复后 30 天自动关闭。不再允许回复。