媒体查询不适用于我的 Wordpress 主题的网站徽标

Posted 2023-03-06

【中文标题】媒体查询不适用于我的 Wordpress 主题的网站徽标

【英文标题】：Media Queries won't work for my Wordpress theme's site logo

【发布时间】：2018-04-14 06:53:34

【问题描述】：

我正在使用一个名为 Spacious 的 WordPress 主题。我已经设置了一个网站徽标，但我似乎无法使徽标响应。该徽标仅响应某些媒体查询，但不响应移动屏幕尺寸。

我将站点徽标的位置从标题下方的中心更改为左侧的标题上方。我认为这可能是问题，但我不确定。难道我做错了什么？我怎样才能让我的标志响应？我的网站的链接是：davenport.ryannemurphy.com。我用于徽标的 CSS 代码如下：

@media only screen and (max-width: 600px) 
.custom-logo margin-top: 25px;
position: absolute;

@media only screen and (max-width: 768px) .header-image height: 100px;


.custom-logo width: 50%;
margin-top: -20px;




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


.custom-logo width: 50%;
position: relative;


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

.custom-logo width: 50%;
margin-top: -20px;
position: relative;






@media only screen and (max-width: 1500px).custom-logomargin-left: 100px;

@media only screen and (max-width: 1650px).custom-logo margin: 30px; 

@media only screen (min-width: 1651px) and (max-width: 1850px).custom-logo width: 90%;


@media only screen and (max-width: 1950px)
.custom-logo margin-left: -100px;
margin-top: -98px;
position: absolute;

【问题讨论】：

你能显示你的 index.html 结构吗

【参考方案1】：

我在 Sinatra 主题中遇到了同样的问题。 我最终只使用了宽度和高度，但我必须在每个之后加上 !important。

这是我使用的css：

@media screen and (max-width: 960px) 
    img[itemprop="logo"] 
        width: 281px !important;
        height: 145px !important;
    

【参考方案2】：

您有一个 硬编码到您的 html 中。我认为您需要删除 img 标签上的高度和宽度属性。

【参考方案3】：

我相信您在附加的 CSS 的第 3 行中缺少右括号（“”）。

使用在线 CSS 格式化程序（例如，https://www.cleancss.com/css-beautify/）来格式化您的 CSS 代码，您会发现由于缺少大括号，您的大多数媒体查询实际上都低于层次结构中的第一个。

不确定这是否会导致问题，但肯定会混淆浏览器并导致错误。