Big Cartel Roadie主题-增加移动设备上的徽标大小

Question

我想增加标题徽标的大小，仅用于手机视图。当我尝试在一个测试站点上调整css时，整个程序崩溃了。我更改了这些最大高度数字：

我看到手机代码中有计算——更改数字可能会打破这一点吗？

@media screen and (max-width: 767px) {
.header-home-link.has-logo {
height: auto;
max-height: 64px;
}
}
@media screen and (min-width: 320px) {
.header-home-link.has-logo {
height: auto;
max-height: 50px;
}
}

Answer 1

从你的问题来看，你似乎在编辑一段现有的代码，所以可能还有其他我不知道的因素。然而，您当前的设置是让每个宽度大于320像素的都将高度设置为50像素，而每个宽度小于700像素的都有64像素的徽标高度。这种矛盾可能导致了一些问题，然而，我知道chrome优先考虑代码中稍后的规则，从而创建了一个320像素以下的窗口，其中徽标高度为64像素。为了获得更干净的解决方案，我建议将所有其他屏幕的徽标高度放在主CSS中，而不使用媒体规则，并为徽标的高度添加宽度为500px左右的max-width媒体规则。

还有一个特殊的原因，为什么你选择设置最大高度，然后将高度设置为自动，而不是直接更改图像的高度，然后在必要时将宽度设置为自动？

如果你仍然有问题，我也可以建议你尝试通过用你知道会起作用的简单语句测试代码的各个方面来隔离问题。